Flex Shrink

Utilities for controlling how flex items shrink.

Class Properties
flex-shrink-0 flex-shrink: 0;
flex-shrink-1 flex-shrink: 1;
Basic Usage
Shrink

<div class="d-flex flex-grow-1 gap-4">
    <MudPaper Class="flex-none py-8 mud-theme-primary" Width="64px" Elevation="0"/>
    <MudPaper Class="flex-shrink-1 py-8 mud-theme-primary" Width="100%" Elevation="0"/>
    <MudPaper Class="flex-none py-8  mud-theme-primary" Width="64px" Elevation="0"/>
</div>
No shrink

<div class="d-flex flex-grow-1 gap-4">
    <MudPaper Class="flex-1 mud-theme-primary" Width="64px" Elevation="0"/>
    <MudPaper Class="flex-shrink-0 py-8 mud-theme-primary" Width="128px" Elevation="0"/>
    <MudPaper Class="flex-1 py-8 mud-theme-primary" Width="64px" Elevation="0"/>
</div>
Applying conditionally
Breakpoints

You can use the utility class to target media queries like responsive breakpoints. For example, use flex-md-shrink-1 to apply the flex-shrink-1 utility at only medium screen sizes and above.

<div class="...flex-md-shrink-1">
  ...
</div>

To learn more, check out the documentation on Breakpoints and other modifiers you can use.

An unhandled error has occurred. Reload 🗙