Prevent flexbox shrinking
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.
Try setting the flex-shrink
property to 0
on the .flex-box
.
There are two variants for prevent shrinking flex-child
set to flex-child this prop:
- with explicitly prop
flex-shrink: 0;
- or with shorthand flex prop
flex: 1 0; /* Two values syntax: flex-grow | flex-basis */
In your case flex-child is .flex-box
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>