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.