A use case for CSS min-content and max-content

1 min read

This post is part of my Today I learned series in which I share all my learnings regarding web development.

Recently I came across the CSS width property values min-content and max-content. I haven't heard of these before and couldn't imagine when these values would be useful. So I asked Twitter to get some answers. As usual Sven Wolfermann helped me out and sent me a CodePen which showed when I'd want to use these values.

min-content max-content use case

As you see in the CodePen example the subline is controlling the overall width of the headline. If you would have asked me a month ago I'd probably would have said that this is not possible in CSS.

See the Pen CSS Question by @vasilis – min/max-content by Sven Wolfermann (@maddesigns) on CodePen.

I never had to build a layout like this, but good to know that it's possible. ;)


Load time