flex-basis: content
flex-basis: content
flex-basis: content

Equivalent Content⤴

flex-basis: content is set with a few words
This has flex-basis: content; and background-color: rgba(0, 0, 0, 0.2); set with a lot of additional text, unlike other flex items across a few lines.
This too has flex-basis: content with a medium amount of extra content.

Variable amounts of content⤴

flex-basis: content is set with a few words
This has flex-basis: content; and background-color: rgba(0, 0, 0, 0.2); set with a lot of additional text, unlike other flex items across a few lines.
This too has flex-basis: content with a medium amount of extra content.

variable contents with no shrink⤴

flex-basis: content is set with a few words
This has flex-basis: content; and background-color: rgba(0, 0, 0, 0.2); set with a lot of additional text, unlike other flex items across a few lines.
This too has flex-basis: content with a medium amount of extra content.

Flex container⤴

flex-basis: content
flex-basis: content
flex-basis: 100%

Flex container⤴

flex-basis: 70%
flex-basis: content
flex-basis: 80%

Flex container⤴