css - 防止 flexbox 收缩

Question

我正在使用 flexbox 来布局页面，因为 growing 行为很有用。但我想完全防止收缩行为。

无论如何要管理这个？

示例代码:

<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-box 上的 flex-shrink 属性设置为 0。