Make Element Width Stretch to Fit Its Children When Element's Parent Has Overflow: Auto;

Make element width stretch to fit its children when element's parent has overflow: auto;

Thanks to Javalsu, Hashem Qolami, and Danield for helping me find a suitable solution. Indeed, the trick is to utilize inherent display properties of tables. The solution I found was to wrap the .bookcase in another element (I'm calling this wrapper element the .wall). Move the overflow: auto; with the static height: and width: properties from the .bookcase to the .wall, and add display: table; and width: 100%; to the .bookcase.

The display: table; property is needed for when overflow is scrolling, and the width: 100%; is needed for when the overflow is not scrolling.

My New HTML:

<div class="wall">
    <div class="bookcase">
        <div class="bookshelf">
            <div class="book"></div>
            <div class="book"></div>
            <div class="book"></div>
        </div>
        <div class="bookshelf">
            <div class="book"></div>
            <div class="book"></div>
            <div class="book"></div>
            <div class="book"></div>
        </div>
        <div class="bookshelf">
            <div class="book"></div>
        </div>
    </div>
</div>

My New CSS:

.wall {
    width: 60%;
    height: 300px;
    margin: 0 auto;
    background: lightgrey;
    overflow: auto;
}
.bookcase {
    display: table;
    width: 100%;
}
.bookshelf {
    background: lightgreen;
    white-space: nowrap;
}
.book {
    display: inline-block;
    height: 60px;
    width: 60px;
    background: pink;
}

jsFiddle demo

Result:


or

Expanding a parent div to the height of its children

Try this for the parent, it worked for me.

overflow:auto; 

UPDATE:

One more solution that worked:

Parent:

display: table;

Child:

display: table-row;

CSS - Stretch a child div to the full height of its parent that is overflowed

As i can see, in your case needs to create another class and wraping the container. Copy all styles from the .container to the .wrapper and into the .container set min-height: 100%. Finally to stretch the .layer add bottom: 0.

.body {
  height: 200px;
  overflow-y: auto;
}
/* New class */
.wrapper {
  width: 200px;
  height: 300px;
  overflow-y: auto;
}
.container {
  position: relative;
  width: inherit; /* changed */ 
  min-height: 100%; /* New line */
  /* height: 300px; */
  /* overflow-y: auto; */
}
.layer {
  position: absolute;
  top: 0;
  bottom: 0; /* New line */
  width: inherit;
  /* height: inherit; */
  background: #aaccff99;
}

    <div class="body">
      <div class="wrapper">
        <div class="container">
          <div class="layer"></div>
          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece
          of classical Latin literature from 45 BC, making it over 2000 years old. Richard
          McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the
          more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the
          cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum
          comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
          of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of
          ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
          dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum
          used since the 1500s is reproduced below for those interested. Sections 1.10.32 and
          1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact
          original form, accompanied by English versions from the 1914 translation by H. Rackham.
        </div>
      </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;
}

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

---

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

How to make a parent div stretch according to it's child's content?

This is a solution that can work. You can play around with it but this gets the job done for me when I want cells to have the same height as eachother even with variable heights and contents.

Take a look : fiddle

CSS

div.content {
    display: table;
}
div.box {
    width: 300px;
    display: table-cell;
    vertical-align: top;
    background: #ccc;
    margin: 10px
}

One last change. You can use the Flex instead of table.
http://jsfiddle.net/cornelas/5rRhp/2/

div.content {
    display: flex;
}
div.box {
    width: 300px;
    vertical-align: top;
    background: #ccc;
    margin: 10px
}

How to prevent child's content from stretching parent's width

Try width:0;min-width:100%; on the message container:

.box {  display: table;  margin: auto;  border: 1px solid black;}
.container {  display: flex;  justify-content: center;}
.icon {  margin-right: 10px;}
message {  display:block;  width:0;  min-width:100%;}

<div class='box'>  <div class='container'>    <div class='icon'>      X    </div>    <div class='content'>      <div class='title'>        Some title      </div>      <message>        <div>Long message that should not make parent wider</div>      </message>    </div>  </div></div>

Stretch child div height to fill parent that has dynamic height

The solution is to use display: table-cell to bring those elements inline instead of using display: inline-block or float: left.

div#container {  padding: 20px;  background: #F1F1F1}.content {  width: 150px;  background: #ddd;  padding: 10px;  display: table-cell;  vertical-align: top;}.text {  font-family: 12px Tahoma, Geneva, sans-serif;  color: #555;}

<div id="container">  <div class="content">    <h1>Title 1</h1>
    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.      <br>Sample Text. Sample Text. Sample Text.      <br>Sample Text.      <br>    </div>  </div>  <div class="content">    <h1>Title 2</h1>
    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>  </div></div>

---

Related Topics