Prevent flexbox shrinking
Solution 1:
Try setting the flex-shrink property to 0 on the .flex-box.
Solution 2:
Add a min-width with whatever you want the smallest possible value of the box to be. Flexbox won't shrink the width below the min-width.
Solution 3:
You can try to apply to the child:
.flex-box{
width: max-content;
}
Final result:
.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>
Solution 4:
If like me your flex-direction is row, try setting the width of the child to 100%. That fixed the shrinking for me.