CSS: Flex and "min-width"
min-width is known as a CSS property that can be set to define a least width for an element. Surprisingly, it can also be used to set something that feels like
min-width in a
While the default
min-width value is
0 (zero), for
flex items it is
auto. This can make block elements take up much more space than desired, even stretching their container beyond the screen edge on small screens.
min-width is defined to win against competing
max-width, meaning as soon as the element's width would shrink below its implicit
min-width:auto will kick in and keep the element from shrinking. The fix is obvious now:
It tells the browser that this element has no right to take up any minimum width, and now it will be rendered properly, taking up only as much width as is available:
A note about flex-shrink: While
flex-shrink sounds like it could help here, it does not. The described issue is about element-sizing based on the element's content, while
flex-shrink defines shrinkage relative to other flex elements in the same context.