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