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.
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
Status in Chromium
In development (tracking bug)
Consensus & Standardization
Last updated on 2021-07-25