I am facing an issue with stretching the children of a column flexbox container. While I can stretch one of the flexbox child elements, I am unable to stretch its nested children. Below is an example where .flex-child-2-child and .flex-child-2-child-child should vertically fill the space within .flex-child-2:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
border: 4px solid green;
}
.flex-child-1 {
width: 100px;
background-color: SteelBlue;
}
.flex-child-2 {
flex: 1;
background-color: LightSeaGreen;
}
.flex-child-2-child-child,
.flex-child-2-child {
height: 100%;
}
.flex-child-2-child-child {
background-color: Tomato;
display: flex;
width: 100%;
}
.flex-child-2-child-child > div {
flex: 0 1 auto;
border: 1px solid yellow;
height: 100%;
width: 100px;
}
.flex-child-2-child-child > div + div {
flex: 1;
}<div class="flex-child flex-child-1">
Test
</div>
<div class="flex-child flex-child-2">
<div class="flex-child-2-child">
<div class="flex-child-2-child-child">
<div>Hello</div>
<div>World!</div>
</div>
</div>
</div>One solution could be using the height property instead of min-height on the body element, but this would cause long content to overflow out of the body container.
body {
display: flex;
height: 100vh;
flex-direction: column;
border: 3px solid green;
}
.flex-child-1 {
width: 100px;
background-color: SteelBlue;
}
.flex-child-2 {
flex: 1;
background-color: LightSeaGreen;
}
.flex-child-2-child-child,
.flex-child-2-child {
height: 100%;
}
.flex-child-2-child-child {
background-color: Tomato;
display: flex;
}
.flex-child-2-child-child>div {
flex: 0 1 auto;
border: 1px solid yellow;
width: 100px;
}
.flex-child-2-child-child>div+div {
flex: 1;
}<div class="flex-child flex-child-
1">
Test
</div>
<div class="flex-child flex-child-2">
<div class="flex-child-2-child">
<div class="flex-child-2-child-child">
<div>Hello</div>
<div>World!
<p></p>
[ ... ]
<p></p>
</div>
</div>
</div>
</div>