flexbox shrink does not work as expected with text content [duplicate]

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 allowed to let my content grow, even though it should "shrink" it down?