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

防止CSS3 flex-shrink破坏内容

1 个答案: