Grow flex items from original size

The Solution at a Glance

• Make sure the default behavior is applied where the flex items ask for a flex base size based on their content by setting flex-basis and inline-size (or block-size, whichever corresponds to the main direction) to auto.

The “original size” of a flex item is based on its content

By default, flex items ask to be a size that is based on the content inside the flex items.

If the flex items get to be that size and there’s still unused space in the flex container, they flex items are asked if they want to grow in size to take advantage of the unused space. If a flex item has a value of flex-grow greater than zero, it will agree to grow.

Any growing will be done on top of that original size the flex item asked for.

The flex item asks for that original content-based size because its initial values of flex-basis and the sizing property that corresponds to the main direction (inline-size or block-size, width or height) are both auto.

Make sure you’re not accidentally setting the flex base size to something else

If you use the flex shorthand to tell flex items to grow, then you might be setting flex-basis to something else than auto.

For example, when you set flex: 1, you’re setting flex-grow: 1, flex-shrink: 1, and flex-basis: 0. Because you’re setting flex-basis: 0, the flex item will ask to be 0 pixels. And when offered to grow to take advantage of unused space in the flex container, it will grow from that size of 0 pixels.

To let your flex item grow without resetting flex-basis, you could replace the flex: 1 shortcut with a more explicit flex: 1 1 auto. This sets flex-grow: 1, flex-shrink: 1, and flex-basis: auto.

You could even leave the initial values of flex-shrink: 1 and flex-basis: auto as they are, and only set flex-grow: 1 on your flex item. That way, the flex item will grow from that content-based size.