Prevent flexbox shrinking

Question

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;
}

Answer 1

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