Most flexbox utilities (like .justify-content) are applied directly to the outer parent container. However, the Grow and Shrink classes are unique. You apply them selectively to individual child elements to control exactly how those specific items fight for space within the row!
By default, flex items are totally passive; they only take up exactly as much space as their inner content demands. If you apply .flex-grow-1 to a child item, you command it to become aggressive and mathematically consume every last pixel of empty space remaining in the container until it hits the wall!
If you apply .flex-grow-1 to multiple items simultaneously, they will negotiate and divide the leftover empty space equally among themselves.
Notice all the dead empty space sitting on the right side.
Box 2 devours all the empty space dynamically!
They all fight for space, automatically becoming perfectly equal widths!
<!-- A classic search bar layout. The input grows to fill the gap, the button stays fixed! -->
<div class="d-flex">
<input type="text" class="flex-grow-1 form-control" placeholder="Search...">
<button class="btn btn-primary">Go</button>
</div>Bootstrap sets all flex elements to naturally shrink (using flex-shrink: 1) when space runs out horizontally. This prevents items from bleeding out of the container when the screen gets narrow.
However, what if you have a vital icon or button that absolutely must never be compressed under any circumstances? You can armor the element by giving it the .flex-shrink-0 class. This explicitly prevents the browser from making it smaller, forcing everything else around it to shrink instead.
The large text block on the left violently forces the second block to shrink its text into an ugly vertical tower.
The second box refuses to yield its native padding structure, forcing the large paragraph to adapt instead!
<!-- The text paragraph can be safely compressed, but the vital checkout button refuses to shrink! -->
<div class="d-flex">
<p class="w-100">Gigantic amount of user description text...</p>
<button class="btn btn-warning flex-shrink-0">Checkout</button>
</div>