← Back to release summary

flex-basis honors keywords 'content' and 'min/max/fit-content'

Category
CSS
Type
Chromium catches up
Status
In development (Chrome In development)
Intent stage
Prepare to ship

Summary

You can now specify the keywords 'content', 'min-content', 'max-content', or 'fit-content' as the value of the 'flex-basis' property and its 'flex' shorthand. 'content' makes flex base size use the default sizing rules as if 'flex-basis' and preferred size property ('width' or 'height') are both 'auto', ignoring any specified 'width' or 'height' in the main axis dimension when 'flex-basis' is 'auto'. The other keywords are same as usual and give more options for specifying the flex base size.

Motivation

In responsive layouts, when adding or removing display:flex to a container, you previously had to sometimes add/remove values for each individual item. 'content' makes this no longer necessary in some situations. The other keywords give more options in setting the flex basis. I don't think there was previously a way to get the new 'fit-content' or 'min-content' behavior, but you could sometimes get 'max-content' by giving the flex-basis and preferred size properties a value of 'auto'. Additional Spec link https://drafts.csswg.org/css-sizing-3/#sizing-values

Standards & signals

Explainers: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flex-basis https://stackoverflow.com/a/51285309/681070

View on chromestatus.com