css - 防止 CSS3 flex-shrink 挤压内容

Question

我试图在 CSS3 中创建一个灵活的布局，其中有 3 个盒子相互堆叠。这些盒子是 sibling ，因此具有相同的父元素。第一个盒子的高度必须适合它的内容。以下两个框的高度将增长以适应它们各自的内容，直到它们即将溢出它们的父框。在这种情况下，它们会收缩以免溢出。

问题是，如果其中一个收缩盒的内容相对于另一个收缩盒而言较小，我无法弄清楚如何防止其中一个收缩盒被压碎。我希望这些框缩小到不再缩小的某个点——例如，相当于两行文本。设置 min-width 不是一个选项，因为我不希望盒子比它们的内容高，以防内容只有一行。如果任何盒子已经到了不再收缩的地步，并且父级无法容纳它们而不会溢出，则父级将获得一个滚动条。

我事先不知道内容，所以布局必须是动态的。如果可能的话，我只想用 CSS 来解决这个问题。

这是 box3 太小的问题示例:

p {
    margin: 0;
}
.container, .box {
    border: 1px solid black;
}
.box {
    background-color: white;
    margin: 1em;
    overflow: auto;
}
#container {
    background-color: yellow;
    display: flex;
    flex-direction: column;
    height: 15em;
    overflow: auto;
}
#box1 {
    flex: 0 0 auto;
}
#box2 {
}
#box3 {
}

<div id="container" class="container">
    <div id="box1" class="box">
        <p>◼</p>
    </div>
    <div id="box2" class="box">
        <p>◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼</p>
    </div>
    <div id="box3" class="box">
        <p>◼◻◻</p>
        <p>◼◼◻</p>
        <p>◼◼◼</p>
    </div>
</div>

Answer 1

如果我对您的问题的理解正确，那么 flex-shrink 属性应该就是您要查找的内容。

将#box1 设置为 flex-shrink: 0

将#box2 设置为 flex-shrink: 1

将#box3 设置为 flex-shrink: 1