防止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>

Answer 4

如果像我一样，您的flex-direction是row，请尝试将孩子的宽度设置为100％。那对我来说缩小了。