Parent div does not grow to fit content

Question

I have 3 divs that are inside a parent div, but the parent div "main" won't adjust the height to fit all the contents of div inside.

<div id="main" style="width: 1000px; height: 100% overflow: hidden;">
  <div id="menu" style="width:250px; float: left;">
    <ul>
      <li>Menu items</li>
      <li>Menu items</li>
      <li>Menu items</li>
    </ul>
  </div>
  <div id="content" style="width:500px; height: 1000px float: left;">
    <p>CONTENT</p>
  </div>
  <div id="menu" style="width:250px; float: left;">
    <ul>
      <li>Menu items</li>
      <li>Menu items</li>
      <li>Menu items</li>
    </ul>
  </div>
</div>

As you can see above the height of "content" is 1000px but the parent "main" won't adjust to be 1000px, it just stops displaying the content of "content" since "main" runs out of height.

How can I solve this?

you have to clear thefloats and height:100% may be a problem depending on what the parent of main is. Clearing the float should solve the problem — Jarlik Stepsto, Feb 14 '22 at 21:01

score 0 · Answer 1 · answered Feb 14 '22 at 21:03

If you want the parent div grow to fit content, you could use height:max-content,

Also, you miss the ; for height which makes height:1000px and height:100% for content not working

#main{
 height:max-content;
 border:2px solid black;

}
#content{
 width:500px;
 height: 1000px;
 float: left;
}

<div id="main" style="width: 1000px; overflow: hidden;">

<div id="menu" style="width:250px; float: left;">
<ul>
<li>Menu items</li>
<li>Menu items</li>
<li>Menu items</li>
</ul>
</div>

<div id="content" >
<p>CONTENT</p>
</div>

<div id="menu" >
<ul>
<li>Menu items</li>
<li>Menu items</li>
<li>Menu items</li>
<li>Menu items</li>
<li>Menu items</li>
<li>Menu items</li>
</ul>

</div>

</div>

score -1 · Answer 2 · answered Feb 14 '22 at 21:02

-1

You have left a bunch of semicolons out of your css, by the way. You are specifically declaring the height of your container div to be 100% (that's 100% of the view/window), and setting it's overflow to 'hidden.' So the behaviour you describe is to be expected. Try removing the overflow and height properties to see what happens.

answered Feb 14 '22 at 21:02

Nicolas Goosen

583
5
14

`height: 100%` does not apply 100% height of the view/window. That would be `100vh`. `height: 100%` means 100% of the parents height. However this requires the parent to have a defined height instead of a calculated height to fit content. – tacoshy Feb 14 '22 at 21:08
touché, but I was assuming that the parent of the container was ``. – Nicolas Goosen Feb 14 '22 at 21:39

Parent div does not grow to fit content

2 Answers2