Menu
The following HTML is simple and does what I want. The green body stretches downward to fill the window.
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1">
This is the body.
</div>
</div>
</body>
But if I replace that body text with some flex columns, and I give them height:100% because I want them to stretch to the bottom, the newdiv actually gets a height greater than 100% of it's container and causes everything to scroll. Why doesn't 100% mean 100% here?
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1">
<!-- The new part -->
<div id='newdiv' style="display:flex;flex-direction:row; height:100%">
<div style="background:#ffd0d0"> Col 1 </div>
<div> Col 2 </div>
</div>
</div>
</div>
</body>
447
The reason you're getting the vertical scrollbar is because you're telling the div parent of col1 and col2 to be height: 100%. This by itself gives it the full height of the viewport.
From your code:
<div id='newdiv' style="display:flex; flex-direction:row; height:100%">
<div style="background:#ffd0d0"> Col 1 </div>
<div> Col 2 </div>
</div>
Except this div has a sibling: the header div, which is also taking up space.
So when the browser does it's height calculation, here is the result:
100% + (computed height of header div) > viewport height = vertical scrollbar
Instead of using defined heights, consider letting flexbox do the work. By default, flex items expand the full length of the container along the cross-axis.
So by simply declaring display: flex, child elements will expand to fill all available space (with no vertical scroll). But since a height rule will override this flex setting, we need to remove height: 100% from any flex items.
html, body { height: 100%; }<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1; display: flex;"><!--adjustment here-->
<div id='newdiv' style="display:flex;"><!--adjustment here-->
<div style="background:#ffd0d0; display: flex;"> Col 1 </div>
<div> Col 2 </div>
</div>
</div>
</div>
</body>There are two adjustments to the original code.
display: flex
height: 100%
Fiddle Demo
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
