Preventing Flex Item Shrinking in Flexbox
In Flexbox, items can shrink by default if the container is smaller than the combined size of its items. To prevent a flex item from shrinking, you can set its flex-shrink property to 0.
flex-shrink: 0: Ensures the flex item does not shrink even when there is insufficient space in the container.flex: 1 0 auto: A shorthand that allows the item to grow but prevents it from shrinking (flex-grow: 1,flex-shrink: 0,flex-basis: auto).Use in combination with
flex-basisto control the initial size while preventing shrinking.This is useful for maintaining minimum readability, fixed-size components, or certain layout constraints in responsive designs.
In this example, item1 will maintain its size and not shrink even if the container is too small, whereas item2 will shrink to fit the available space.