Example of flex-basis: content

Question

I noticed in the flexbox specification that flex-basis can be set to content.

I'm trying to use that in the html. But it's not working in chrome.

Can someone show me an example for flex-basis: content?

Thank you.

Answer 1

Note that the content value is not yet supported by most major browsers.

Here's a screenshot from MDN:

For an explanation about what content does, MDN is also helpful:

content

Indicates automatic sizing, based on the flex item’s content.

Note: Note that this value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using auto together with a main size (width or height) of auto.

Note: Brief history

• Originally, flex-basis: auto meant "look at my width or height property".
• Then, flex-basis: auto was changed to mean automatic-sizing, and "main-size" was introduced as the "look at my width or height property" keyword.
• Then, that change was reverted, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing.

_{source: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values}