Child Div Is Bigger Than Parent Div

width of child div is larger than parent

Use left:0/right:0 instead of width:100% to avoid overflow due to margin as actually your element is taking 500px + 20px(of margin left/right) inside the parent element.

As a side note, box-sizing: border-box is working perfectly but inside the element so padding are included in the width but margin of course not:

border-box tells the browser to account for any border and
padding in the values you specify for width and height ... ^ref

.parent {  height: 500px;  min-width: 500px;  position: relative;  background-color: red;}
.child {  padding: 10px 10px 10px 10px;  margin: 10px 10px;  background-color: grey;  bottom: 0px;  box-sizing: border-box;  position: absolute;  left: 0;  right: 0;}

<div class="parent">  <div class="child" ></div></div>

Is there a way to make a child DIV's width wider than the parent DIV using CSS?

Use absolute positioning

.child-div {
    position:absolute;
    left:0;
    right:0;
}

bootstrap: Why div child is bigger than div parent?

You need to use bootstrap classes to fix that, add row col-sm-12 to indicador

See result:

.indicador {  background-color: black;  color: white;  border-radius: 5px;}
.indicadormedio {  background-color: yellow;  color: #01CB99;  font-size: 40px;  border: 1px solid green;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <div class="row " style=" display: table; ">
    <div class="col-sm-12 ">      <div class="row">        <div class="col-sm-12">          <div class="row" style="background-color:red">            <div class="col-sm-12 ">              <div class="indicador row col-sm-12">                <div class="row">                  <div class="col-sm-12">title </div>                </div>                <div class="row indicadormedio">                  <div class="col-sm-12">30</div>                </div>                <div class="row">                  <div class="col-sm-12">                    <div class="row">                      <div class="col-sm-12">subtitle</div>                    </div>                  </div>                </div>              </div>            </div>
          </div>        </div>      </div>
    </div>
  </div>
</div>

Make div bigger then its parent

You need to "pop" that element from normal flow with position rule with specified dimensions. E.g. position: fixed;

.outer {
  width: 10vw;
  height: 10vh;
  position: relative;
  background: rgba(130, 130, 255, .3);
  border: 1px solid red;
}

.inner {
  width: 90vw;
  height: 90vh;
  position: absolute;
  left: 5px;
  top: 5px;
  background: rgba(130, 255, 130, .3);
  border: 1px solid green;
}

<div class="outer">
  <div class="inner"></div>
</div>

Child element wider than parent element

you do understand that you gave the image a width of 300px when your container has a width of 100px right? i mean you literally made the image wider than container yourself

you can use overflow to handle this. give overflow:hidden to your container to hide anything that does not fit inside it. or overflow:auto to scroll.

How to make a child element wider than its parent div, but not fill the entire browser width and be responsive?

Use min() to take the minimum value between 1000px and the screen width (100vw). I am using margin-inline which is as shorthand for left/right margin.

.wrapper {
  max-width: 800px;
  margin:auto;
}

.alignwide {
  margin-inline: calc((100% - min(100vw,1000px)) / 2);
  background: red;
}

<div class="wrapper">
  <div class="alignwide">
    This div expands beyond .wrapper parent margins.
  </div>
</div>

Can you make a child div larger than parent without position absolute

Yes!

Not only that, we can do one better by using vw and calc.

Simply set the width of the child elements to be 100% of the viewport width by using vw (percentage viewport units), and then set their left margin to a negative calculated value based on this, minus the width of the wrapper. Other than the optional max-width of the parent, everything else is calculated automatically. You can dynamically change the width of the parent container, and the children will automatically resize and align as needed, without being positioned.

body,html,.parent {  height: 100%;  width: 100%;  text-align: center;  padding: 0;  margin: 0;}.parent {  width: 50%;  max-width: 800px;  background: grey;  margin: 0 auto;  position: relative;}.child {  width: 100vw;/* <-- children as wide as the browser window (viewport) */  margin-left: calc(-1 * ((100vw - 100%) / 2));/* align left edge to the left edge of the viewport */  /* The above is basically saying to set the left margin to minus the width of the viewport MINUS the width of the parent, divided by two, so the left edge of the viewport */  height: 50px;  background: yellow;}

<div class='parent'>  parent element  <div class='child'>child element</div></div>

---

Related Topics