防止 CSS3 flex-shrink 压缩内容

Question

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

问题在于，如果其中一个收缩框的内容相对于另一个收缩框而言较小，我无法弄清楚如何防止其中一个收缩框被压碎。我希望这些框缩小到不再缩小的某个点——例如，相当于两行文本。设置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