Flexbox的flex-shrink属性在文本内容场景下未按预期生效的问题咨询

我最近做了个简单的布局，里面包含两个flex子容器，按默认规则它们的flex-shrink值应该都是1才对。我本来以为，当内容超出父容器总尺寸时，flex-shrink会自动把溢出的内容收缩适配，但实际运行起来却不是这么回事——这两个子容器直接超出了父容器的范围，完全没按预期收缩。

下面是我的代码：

<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>

备注：内容来源于stack exchange，提问作者David Mason