防止 flexbox 收缩 [英] Prevent flexbox shrinking

问题描述

我使用 flexbox 来布局页面，因为 增长 行为很有用.但我想完全防止收缩行为.

无论如何要管理这个?

示例代码:

<div class="flex-box">这个应该增长而不是缩小
<div></div><div></div>

CSS

.flex-vertical-container {显示:弹性；弹性方向:列；}.flex-box {弹性:1；}

解决方案

尝试将 .flex-box<上的 flex-shrink 属性设置为 0/代码>.

I'm using flexbox to layout a page because the growing behavior is useful. But I'd like to completely prevent the shrinking behavior.

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

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

.flex-box {
    flex: 1;
}

解决方案

Try setting the flex-shrink property to 0 on the .flex-box.

这篇关于防止 flexbox 收缩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！