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

Specification

Editor's draft

Status in Chromium

Blink>Layout>Flexbox


In development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Last updated on 2021-07-25