CSS 防止 flexbox 收缩
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29157016/
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 flexbox shrinking
提问by Simon Boudrias
I'm using flexbox to layout a page because the growingbehavior is useful. But I'd like to completely prevent the shrinkingbehavior.
我使用 flexbox 来布局页面，因为增长的行为很有用。但我想完全防止收缩行为。
Anyway to manage this?
无论如何要管理这个？
Example code:
示例代码：
<div class="flex-vertical-container">
<div class="flex-box">
This one should grow but not shrink
</div>
<div></div>
<div></div>
</div>
CSS
CSS
.flex-vertical-container {
display: flex;
flex-direction: column;
}
.flex-box {
flex: 1;
}
回答by zgood
Try setting the flex-shrinkproperty to 0on the .flex-box.
尝试将flex-shrink属性设置为0on .flex-box。
回答by firefoxuser_1
Add a min-widthwith whatever you want the smallest possible value of the box to be. Flexbox won't shrink the width below the min-width.
添加一个min-width你想要的最小可能值的框。Flexbox 不会缩小最小宽度以下的宽度。
回答by Erik Martín Jordán
You can try to apply to the child:
您可以尝试向孩子申请：
.flex-box{
width: max-content;
}
Final result:
最后结果：
.flex-vertical-container{
display: flex;
flex-direction: column;
}
.flex-vertical-container div{
background: gray;
}
.flex-box{
width: max-content;
}<div class="flex-vertical-container">
<div class="flex-box">
This one should grow but not shrink
</div>
<div>This is shrinking</div>
<div>This is shrinking</div>
</div>
回答by Serere Jegede
If like me your flex-directionis row, try setting the width of the child to 100%. That fixed the shrinking for me.
如果像我一样的flex-direction就是row，尽量在孩子的宽度设置为100％。这为我解决了收缩问题。
