flexbox 收缩无法按预期方式处理文本内容

Question

我用两个弹性容器创建了一个简单的布局。
两者都有一个隐式的 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>

这是一支演示这一点的笔。

如果我只有一个除文本内容之外具有一定高度的容器，则整个示例将按预期工作。

为什么允许“文本”内容让我的内容增长，即使它应该“缩小”它？

Answer 1

以下代码将防止溢出并使您适合您指定的区域。我添加了溢出-x：滚动

<div style="width: 100px; height: 200px; background-color: red; display: flex; flex-direction: column; padding: 4px; overflow-x:scroll;">
  <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>