tgreen tgreen - 29 days ago 11
CSS Question

While will a div with min-height: 100% not expand when it's content grows to large

Here is a codepen with the general problem:
https://codepen.io/tgreen/pen/PJbPEB

.canvas {
padding: 40px;
max-width: 1170px;
width: 100%;
align-self: center;
min-height: 100%;
background: white;
display: flex;
justify-content: center;
}


I want the canvas to start at a minimum height of 100% so it fills the whole browser window, but if its content grows larger than that it should also grow to contain that. Basically I want that white box to reach the bottom at all times.

Thanks.

Answer Source

Switch the percentage values to vh based values,

Here is a working demo

This is because percentage values are relative to parent container, and what you are trying to achieve is relative to viewport size (you can simply replace the height: 100% of the html, body attributes by a min-height: 100%, but the canevas won't take 100% of the page if the red box is small, it will just adapt to it.