I am currently working on designing a website layout that harnesses the power of flexbox to fill the entire page with content, even when the content does not fully occupy the length of the page.
My approach involves creating a large flexbox container with flex-direction: column;. However, I encountered an issue when setting the last child to flex-grow: 1; and the rest of the children to flex-grow: unset;, causing the flex-grow property to no longer affect the children's content when using min-height.
You can view an example of this on JSFiddle here.
The .should-strech class is meant to represent the content within one of the children that should fill the entire height. When I apply height: 100px, everything behaves as expected (refer to the first box where the yellow area fills the space).
However, once I switch to using min-height: 100px;, the yellow area no longer fills the entire height.
I attempted to place another flexbox inside the child element, but this method is not ideal for my scenario since this component is intended to be generic and may have an unknown or dynamic number of "contents" in each child.
<div class="container height">
<div class="child">
1
</div>
<div class="child">
<div class="should-strech">
2
</div>
</div>
</div>
<br/>
<div class="container min-height">
<div class="child">
1
</div>
<div class="child">
<div class="should-strech">
2
</div>
</div>
</div>
.min-height {
min-height: 100px;
}
.height {
height: 100px;
}
.container {
width: 100px;
display: flex;
flex-direction: column;
background-color: aqua;
}
.child {
background-color: red;
}
.child:last-child {
background-color: green;
flex-grow: 1;
}
.should-strech {
background-color: yellow;
height: 100%;
}