I created a simple layout with two flex containers.
Both have an implicit flex-shrink: 1 like the default value should be.
So I expect, that flex-shrink will shrink down content that "overflows" the total size.
However, this does not work and both of my containers overflow the parent:
<div style="width: 100px; height: 200px; background-color: red; display: flex; flex-direction: column; padding: 4px;">
<div style="background-color: blue;">
Tests1<br>
Tests2<br>
Tests3<br>
Tests4<br>
Tests5<br>
</div>
<div style="background-color: green;">
Test1<br>
Test2<br>
Test3<br>
Test4<br>
Test5<br>
Test6<br>
Test7<br>
Test8<br>
Test9<br>
Test10<br>
Test11<br>
Test12<br>
Test13<br>
</div>
</div>
This is a pen that demonstrates this.
If I had just a container with a certain height except a text-content, the whole example works as intended.
Why is "text" content let my content grow, even though it should "shrink" it down.
You need to sign in to view this answers
Leave feedback about this