CSS 防止 CSS3 flex-shrink 压缩内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19789263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent CSS3 flex-shrink from crushing content
提问by Spomf
I'm trying to create a flexible layout in CSS3 with 3 boxes stacked on each other. The boxes are siblings and thus have the same parent element. The height of the first box must fit its content. The height of the following two boxes shall growto fit their respective content until they're about to overflow their parent. In that case, they shall shrink so that they don't overflow.
我正在尝试在 CSS3 中创建一个灵活的布局，其中 3 个盒子相互堆叠。这些盒子是兄弟元素，因此具有相同的父元素。第一个框的高度必须适合其内容。以下两个框的高度应增长以适应其各自的内容，直到它们即将溢出其父级。在这种情况下，它们会收缩，以免溢出。
The problem is that I can't figure out how to prevent one of the shrinking boxes from becoming crushed if its content is small in relation to the other shrinking box. I want those boxes to shrink down to a certain point where they won't shrink anymore – let's say the equivalent of two rows of text for example. Setting min-widthisn't an option because I don't want the boxes to be taller than their content in case the content is only one row for example. If any of the boxes has come to the point where it shall not shrink anymore and the parent can't hold them without overflowing, the parent shall get a scrollbar.
问题是，如果其中一个收缩盒的内容相对于另一个收缩盒较小，我无法弄清楚如何防止其中一个收缩盒被压碎。我希望这些框缩小到它们不再缩小的某个点——例如，假设相当于两行文本。设置min-width不是一个选项，因为我不希望框比它们的内容高，例如内容只有一行。如果任何一个盒子已经到了不再收缩的程度，并且父级无法在不溢出的情况下握住它们，则父级将获得一个滚动条。
I don't know the content in advance so the layout has to be dynamic. I want to solve this only with CSS, if possible.
我事先不知道内容，所以布局必须是动态的。如果可能的话，我只想用 CSS 来解决这个问题。
Here's an example of the problem where box3is too small:
下面是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>回答by jbenjohnson
IF I understand your question correctly, the flex-shrink property should be what you are looking for.
如果我正确理解您的问题，那么 flex-shrink 属性应该就是您要查找的内容。
Set #box1 to flex-shrink: 0
将 #box1 设置为 flex-shrink: 0
Set #box2 to flex-shrink: 1
将 #box2 设置为 flex-shrink: 1
Set #box3 to flex-shrink: 1
将 #box3 设置为 flex-shrink: 1
