防止Flexbox缩小

我正在使用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;
}

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

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

您可以尝试向孩子申请：

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

如果像我一样的flex-direction就是row，尽量在孩子的宽度设置为100％。那对我来说缩小了。