What this Bootstrap Utility API class does
Sets the CSS flex-shrink property of an element. CSS flex-shrink is a property that is used to control the ability of a flex item to shrink if necessary. It is a part of the flexbox layout system in CSS that allows developers to create flexible and responsive web page layouts.
When a container element has a fixed width and its child elements are set to display as flex items, the flex-shrink property determines whether those child elements should shrink in size to fit the available space within the container. The flex-shrink value is a number that represents the amount of available space that a flex item is allowed to shrink by.
For example, if a container element has a total width of 800px and contains three flex items, each with a width of 300px, the available space for each item is 200px. If the flex-shrink value is set to 1 for each item, and the container width is reduced to 600px, each item will shrink by 100px (1 * 100px), resulting in a total width of 200px for each item.
Example usage & available classes
<div class="d-flex bd-highlight">
<div class="p-2 flex-shrink-0 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
Example override
In the example override below, we are removing the responsive option from the utility, which means it would not be available per breakpoint.
"flex-shrink": map-merge(
map-get($utilities, "flex-shrink"),
(
responsive: false
)
)