Shrink flex items below content size
The Solution at a Glance
- Stop the default behavior where each flex item calculates an automatic minimum size for itself based on its content.
Figure out which minimum size property you need to set
Flex items grow and shrink in the main direction set by the flex container. This direction is set by on the flex container. For example, by default, the main direction goes horizontally from left to right.
Now that you know the main direction, you need to figure out which minimum size property corresponds to it. For example, if the main direction goes horizontally and your flex item has horizontal writing (that’s the default), then the minimum size property would be either min-inline-size or min-width.
If the main direction went vertically from top to bottom, then the corresponding minimum size properties would be min-block-size and min-height.
Set the minimum size property to something else than auto
The minimum size property is auto by default, and that’s why the flex items “protect” their sizes to fit the content.
If you set a value of 0, then our flex item will have no problem being as small as zero pixels. You can change this to whatever you need.
You may end up with overflowing content
If you tell your flex item to stop using this automatic minimum size, it means it might get smaller than some of the content inside. In that case, you may end up with the contents of the flex item overflowing the flex item itself.