防止flexbox收缩

Question

我正在使用flexbox来布局页面,因为增长的行为很有用.但我想完全避免萎缩的行为.

无论如何要管理这个？

示例代码:

<div class="flex-vertical-container">
    <div class="flex-box">
         This one should grow but not shrink
    </div>
    <div></div>
    <div></div>
</div>

CSS

.flex-vertical-container {
    display: flex;
    flex-direction: column;
}

.flex-box {
    flex: 1;
}

Answer 1

尝试将flex-shrink属性设置0为.flex-box.

Answer 2

添加一个min-width您想要的最小可能值的框.Flexbox不会缩小最小宽度以下的宽度.

Answer 3

您可以尝试为孩子申请：

.flex-box{
    width: max-content;
}

最后结果：

.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>