Posted 2 months ago. Visible to the public.

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 max-width.

min-width in a flex context

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.

Image

min-width is defined to win against competing width and max-width, meaning as soon as the element's width would shrink below its implicit auto width, min-width:auto will kick in and keep the element from shrinking. The fix is obvious now:

Copy
min-width: 0

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:

Image


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.

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
about 1 month ago
by Dominik Schöler
Attachments:
broken.png, min-width-0.png
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more