Flex items in a row rendering at different widths

Question

I created 3 boxes using css flexbox in html but Chrome is rendering the boxes with different sizes.

Drag the border of the browser to make the view smaller.

Thanks for your help!

Codepen: https://codepen.io/labanino/pen/rGaNLP

body {
  font-family: Arial;
  font-size: 2rem;
  text-transform: uppercase;
}

.flex {
  height: 200px;
  display: flex;
  flex-direction: row;
}

.flex>section {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.flex>section:nth-child(1) {
  background: brown;
  margin-right: 20px;
  border: 1px solid #999;
}

.flex>section:nth-child(2) {
  background: pink;
  margin-right: 20px;
  border: 1px solid #999;
}

.flex>section:nth-child(3) {
  background: green;
  margin-right: 0;
  border: 1px solid #999;
}

<div class="flex">
  <section>Brown</section>
  <section>Pink</section>
  <section>Green</section>
</div>

score 5 · Accepted Answer · answered Sep 13 '17 at 22:31

Don't use auto in your flex property for your items. Use 100%, and this will adapt the width in the flex box, and adjusts to any number of elements you add (in case you want to add more than 3).

.flex > section {
  flex: 1 1 100%;  
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

The reason they're all different sizes is because when you use auto, it bases its width on the content of the box. That's why the middle one isn't as wide, because the word 'pink' takes up less space than 'green'.

Very nice @Spartacus. Thanks for the explanation. – Labanino Sep 14 '17 at 14:01 — Labanino, Sep 14 '17 at 14:01

score 3 · Answer 2 · answered Sep 14 '17 at 17:05

Here's the source of the problem:

.flex > section { flex: 1 1 auto }

This breaks down to:

flex-grow: 1
flex-shrink: 1
flex-basis: auto

With flex-basis: auto you are sizing the item based on the length of the content. Hence, wider content will create wider items.

If you want equal size for all items in the row, then use:

flex-basis: 0, and
min-width: 0 / overflow: hidden

With flex-basis: 0 you're allocating to each item an equal distribution of space in the container. More details here: Make flex-grow expand items based on their original size

With min-width: 0 or overflow: hidden you're allowing items to shrink past their content, so they can remain equal size on smaller screens. More details here: Why doesn't flex item shrink past content size?

.flex {
  display: flex;
  height: 200px;
}
.flex>section {
  flex: 1;          /* new; same as flex: 1 1 0 */
  overflow: hidden; /* new */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* non-essential demo styles */
.flex>section:nth-child(1) {
  background: brown;
  margin-right: 20px;
  border: 1px solid #999;
}
.flex>section:nth-child(2) {
  background: pink;
  margin-right: 20px;
  border: 1px solid #999;
}
.flex>section:nth-child(3) {
  background: green;
  margin-right: 0;
  border: 1px solid #999;
}
body {
  font-family: Arial;
  font-size: 2rem;
  text-transform: uppercase;
}

<div class="flex">
  <section>Brown</section>
  <section>Pink</section>
  <section>Green</section>
</div>

revised codepen

Flex items in a row rendering at different widths

2 Answers2