防止CSS3 flex收缩挤压内容物

Question

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

问题是，我不知道如何防止其中一个收缩的盒子被压碎，如果它的内容相对于另一个收缩的盒子来说是小的。我希望这些框缩小到某一点，不再缩小，比如说相当于两行文本。设置minwidth不是一个选项，因为我不希望框比其内容高，例如，如果内容只有一行。如果任何一个盒子已经到了不能再收缩的地步，并且母公司不能在没有溢出的情况下握住它们，母公司将得到一个滚动条。

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

下面是box 3太小的问题示例：

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设置为弹性收缩：1

将#box3设置为弹性收缩：1