How do you prevent a flex item from shrinking?

Difficulty: 3/10

flex-shrink, flex-basis, min-width

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.

Key Points

1
flex-shrink: 0: Ensures the flex item does not shrink even when there is insufficient space in the container.
2
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).
3

Example: Prevent Flex Item Shrinking

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.

Scenario Questions

0-2 years experience

Follow-up Questions