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:

1. with explicitly prop flex-shrink: 0;
2. 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>