This demonstrates the logical behavior of how the flexbox algorithm operates. Let's begin by removing certain properties, particularly flex-shrink:0.
html,body{
height:100%;
margin:0;
}
.grand-parent{
height:100%;
overflow:auto;
display:flex;
}
.parent{
display:flex;
flex-direction:column;
min-height:100%;
width:100%;
}
.child{
height:1500px;
width:100%;
display:flex;
}
.green{
background:green;
}
.blue{
background:blue;
}
<div class="grand-parent">
<div class="parent">
<div class="child green"></div>
<div class="child blue"></div>
</div>
</div>
It is evident that there is no overflow due to the elements shrinking to fit their parent container as per the default flexbox behavior.
Initially, we set html,body to be height:100%, followed by defining grand-parent as a row direction flex container. The .parent element was then given min-height:100%, but since its height will equal that of the parent due to default stretch alignment, setting min-height:100% becomes somewhat redundant in this scenario. Additionally, the parent element was made a flex container with a column direction.
Now, focusing on the child elements, their total height exceeds that of the parent, causing them to shrink equally to fit within it, following the default behavior. Even with flex-shrink:0 defined on the parent, it won't grow along with the children because the row direction inside its flex container prevents any width overflow.
If you apply flex-shrink:0 to the children, they will not shrink and will overflow the parent without forcing it to expand, as the parent's height is determined by the stretch behavior within its own flex container.
Changing the alignment of the grand-parent element will cause the parent to grow based on the content's height, rather than the stretch behavior. Even with flex-shrink:0 on the child elements, no impact will be seen:
html,body{
height:100%;
margin:0;
}
.grand-parent{
height:100%;
overflow:auto;
display:flex;
align-items:flex-start;
}
.parent{
display:flex;
flex-direction:column;
min-height:100%;
width:100%;
}
.child{
height:1500px;
width:100%;
display:flex;
flex-shrink:0;
}
.green{
background:green;
}
.blue{
background:blue;
}
<div class="grand-parent">
<div class="parent">
<div class="child green"></div>
<div class="child blue"></div>
</div>
</div>