Html Question posted in
Some basic documentation can be found here.

Html – why parent is narrower than the child?

Why div1 (blue) is not as wide as div2 (red)?

I always thought that an element is as wide as it’s child by default.

https://codepen.io/jack987/pen/VwJYWEW

.div1 {
  background: blue;
  height: 200px;
}

.div2 {
  background: red;
  height: 100px;
  width: 4000px;
}
<div class="div1">
    <div class="div2">
    </div>
</div>
Tags:

4

Answers


  1. 0

    Because div as a block element by default is as wide as the containing element. The containing element here is body, which is again contained in html, which in turn is as wide as the viewport. Your 4000px wide inner div simply overflows out of the dimension of the outer div.

    You can change that, by making the outer div inline-block, and giving it a min-width of 100%.

    .div1 {
  background: blue;
  height: 200px;
  display:inline-block;
  min-width: 100%;
}

.div2 {
  background: red;
  height: 100px;
  width: 4000px;
}
    <div class="div1">
    <div class="div2">
    </div>
</div>
    Login or Signup to reply.
  2. 0

    The .div1 has no specified width, so it defaults to the width of its containing block (typically the viewport). This means it won’t automatically expand to accommodate the width of .div2 unless .div2 is content forces it to do so. Since .div2 has a width of 4000px, it overflows .div1, but .div1 does not expand to fit .div2.

    To make .div1 expand to fit .div2, you can add display: inline-block; or display: inline-flex; in .div1.

    .div1 {
  background: blue;
  height: 200px;
  display: inline-block;
}

.div2 {
  background: red;
  height: 100px;
  width: 4000px;
}
    <div class="div1">
    <div class="div2">
    </div>
</div>
    Login or Signup to reply.
  3. 0

    1. Since you haven’t specified a width for div1, it will try to fit its parent container (likely the body or another containing element). It won’t automatically expand beyond the width of its containing block, even if its child is wider.

    2. div2 has an explicit width of 4000px, which is likely wider than the viewport and its parent (div1).

    As a result, div2 extends beyond the boundaries of div1, but div1 doesn’t grow to contain it. The red background of div2 will be visible outside of the blue background of div1.

    One more thing:
    If you set overflow: auto; or overflow-x: auto; on div1, it will create a scrollable container that accommodates the full width of div2.

    .div1 {
  background: blue;
  height: 200px;
  overflow-x: auto;
}

.div2 {
  background: red;
  height: 100px;
  width: 4000px;
}
    <div class="div1">
    <div class="div2">
    </div>
</div>
    Login or Signup to reply.
  4. 0

    here you know about positioning in the Css you have to add just absolute position to your parent div and it all done.

    .div1 {
  background: blue;
  height: 200px;
  display:inline-block;
  min-width: 100%;
  position: absolute;
}

.div2 {
  background: red;
  height: 100px;
  width: 4000px;
}
    <div class="div1">
    <div class="div2">
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search