flexbox shrink does not work as expected with text content

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

Related Post