Make flex items the same size

The Solution at a Glance

To make flex items the same size in the main direction, give them the same:

• Flex base size.
• Minimum size.

Same flex base size

By default, flex items are sized based on the content inside of them. This could be text, images, whatever. If two flex items have different content, they will end up with different sizes.

Each flex item gets asked how big it wants to be before any growing or shrinking happens. And they say they want a content-based size because their flex-basis is auto and their inline-size or block-size is auto, too.

Instead, we want each flex item to ask for the same size. We can do that by setting the same flex-basis on each flex item. For example, flex-basis: 100px. If the flex items don’t grow and don’t shrink later, this is the size they’ll end up with.

Same minimum size

Each flex item can set a minimum size for itself. When a flex item has a minimum size, it will never be smaller, no matter what. This applies to any box in any layout type, by the way.

Just like the flex base size, the minimum size is based on the contents of the flex item by default. This happens because the initial value of all minimum size properties is auto. We’ll need to overwrite this to make sure our flex items end up with the same sizes.

We’re dealing with sizing in the main direction here. Let’s figure out which minimum size property corresponds to the main direction.

For example, by default flex containers have flex-direction: row. This means the main direction goes horizontally from left to right. So the corresponding minimum size properties will be min-inline-size and min-width.

You only need to set one of these. If you’re working with logical properties, set min-inline-size. Otherwise, set min-width. The browser will automatically keep these two in sync.

We’ll overwrite the initial min-inline-size: auto to min-inline-size: 50px. Now, the flex items will always have at least this size.