Content-based sizing

Flex items are sized based on their content by default

By default, flex items request a flex base size based on their content.

Why? Because the initial value of flex-basis is auto, and that means “check the sizing property that corresponds to the main direction of the flex container”. The initial value of sizing properties is also auto, which in Flexbox means that the flex item will ask for a size based on its content.

How flex item content is sized

Most commonly, this content-based size is the max-content size of the flex item.

Text

If your flex item is a paragraph with some text in it, then the max-content size of that would be the size needed to lay out the entire text in a single line.

Images

If your flex item is an image, then the max-content size would be the size of the image.

If the flex item image is being stretched, then its max-content size might change because of the aspect ratio of the image.

For example, you have an image flex item with flex-basis: content, and a fixed block size and aspect ratio. The content size here would be the block size converted through the aspect ratio.

Flex items with complex content

Your flex item might itself be a flex container with its own flex items. In that case, the max-content size of this flex item would take into account the max-content sizes of its own flex items.

Setting a particular size on some nested content changes the size of that content. For example, if you manually change the dimensions of an image, then that will change the “size contribution” of that image to its ancestor’s content size.

This content-based sizing can lead to unexpected results, especially if you have lots of nested flex containers. Inspecting and tweaking the different sizing properties of elements on a rendered page is a good way to debug problems like this.