How to make flexbox items the same size?

Set them so that their flex-basis is 0 (so all elements have the same starting point), and allow them to grow:

flex: 1 1 0px

Your IDE or linter might mention that the unit of measure 'px' is redundant. If you leave it out (like: flex: 1 1 0), IE will not render this correctly. So the px is required to support Internet Explorer, as mentioned in the comments by @fabb;

---

You need to add width: 0 to make columns equal if contents of the items make it grow bigger.

.item {
  flex: 1 1 0;
  width: 0;
}

Detail: flex: 1 1 0 is the same as flex-grow: 1; flex-shrink: 1; flex-basis: 0; and if the parent container can not provide enough space for the native-size added together of every item (no space to grow), we need to make the width: 0 to give every item the same start point to grow.

---

You could add flex-basis: 100% to achieve this.

Updated Example

.header {
  display: flex;
}

.item {
  flex-basis: 100%;
  text-align: center;
  border: 1px solid black;
}

For what it's worth, you could also use flex: 1 for the same results as well.

The shorthand of flex: 1 is the same as flex: 1 1 0, which is equivalent to:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}

---

The accepted answer by Adam (flex: 1 1 0) works perfectly for flexbox containers whose width is either fixed, or determined by an ancestor. Situations where you want the children to fit the container.

However, you may have a situation where you want the container to fit the children, with the children equally sized based on the largest child. You can make a flexbox container fit its children by either:

setting position: absolute and not setting width or right, or

place it inside a wrapper with display: inline-block

For such flexbox containers, the accepted answer does NOT work, the children are not sized equally. I presume that this is a limitation of flexbox, since it behaves the same in Chrome, Firefox and Safari.

The solution is to use a grid instead of a flexbox.

When you run this snippet, make sure to click on full page to see the effect properly.

body { margin: 1em; } .wrap-inline-block { display: inline-block; } #div0, #div1, #div2, #div3, #div4 { border: 1px solid #888; padding: 0.5em; text-align: center; white-space: nowrap; } #div2, #div4 { position: absolute; left: 1em; } #div0>*, #div1>*, #div2>*, #div3>*, #div4>* { margin: 0.5em; color: white; background-color: navy; padding: 0.5em; } #div0, #div1, #div2 { display: flex; } #div0>*, #div1>*, #div2>* { flex: 1 1 0; } #div0 { margin-bottom: 1em; } #div2 { top: 15.5em; } #div3, #div4 { display: grid; grid-template-columns: repeat(3,1fr); } #div4 { top: 28.5em; }

Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}

Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.

So let's try a grid instead. Aha! That's what we want!

---

Im no expert with flex but I got there by setting the basis to 50% for the two items i was dealing with. Grow to 1 and shrink to 0.

Inline styling: flex: '1 0 50%',

---

None of these answers solved my problem, which was that the items weren't the same width in my makeshift flexbox table when it was shrunk to a width too small.

The solution for me was simply to put overflow: hidden; on the flex-grow: 1; cells.

---

None of these solutions worked for me, so I thought I'd share what did.

.header { display: flex; } .item { width: 100%; } /* Demo styles, for aesthetics. */ .demo { margin: 3rem; } .demo .item { text-align: center; padding: 3rem; background-color: #eee; margin: 0 1.5rem; }

---

This will work even if you wrapping items, like a Grid, but not so simple you should show where it will wrap in media queries))

example:

.flex-item{
     flex: 0 0 calc(25% - (45px / 4 ))
}

works like this:

$n: 4; // number of columns
$gap: 15px; // margin pixels

.flex-parent{
    display: flex;
    gap: $gap;
}
.flex-item{
     flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n ) );
}

---

on the child element of flex

flex: 1 1 25%

this will allow to have 4 items if you want to add more items then you can decrease the %

---