Flex Shrink

Controls how much a flexible item shrinks.

ClassProperties
flex-grow-0flex-grow: 0;
flex-grow-1flex-grow: 1;

Second item does not shrink while others do.

1
shrink item
3
<div class="flex overflow-hidden">
    <div class="flex-grow-1 flex-shrink-1 flex align-items-center justify-content-center bg-primary font-bold p-4 m-3 border-round">1</div>
    <div class="flex-shrink-0 flex align-items-center justify-content-center bg-primary font-bold p-4 m-3 border-round">shrink item</div>
    <div class="flex-grow-1 flex-shrink-1 flex align-items-center justify-content-center bg-primary font-bold p-4 m-3 border-round">3</div>
</div>
 

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:flex-shrink-1 to use a responsive class.

ClassDescription
sm:small screens e.g. phones
md:medium screens e.g. tablets
lg:large screens e.g. notebooks
xl:larger screens e.g monitors
1
Shrink on Mobile
3
<div class="flex">
    <div class="flex-grow-1 flex align-items-center justify-content-center bg-primary font-bold p-4 m-3 border-round">1</div>
    <div class="flex-shrink-1 md:flex-shrink-0 flex align-items-center justify-content-center bg-primary font-bold p-4 m-3 border-round">Shrink on Mobile</div>
    <div class="flex-grow-1 flex align-items-center justify-content-center bg-primary font-bold p-4 m-3 border-round">3</div>
</div>