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