Simple flex problem - why aren't flex items the same size, without setting flex basis

Question

I'm wondering whether I actually understand flex-shrink an flex-grow properly. I'm trying to understand why the flex children aren't the same size. I just want to be able to add as many flex children (i.e. .flex-item divs) into the containing parent div as possible, and for them to resize to the same widths as each other. In this case the text is pushing the width way out for one of them.

How can this be fixed without adding a hard-coded flex-basis?

Any explanation would be very helpful. Thanks for any help here.

#container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: pink;
  overflow: hidden; /* words should wrap anyway... */
}
.flex-item {
  border: 1px solid red;
  flex: 0 0 auto; /* should make flex items equal size */
  word-wrap: break-all;
  /* flex-basis: 0; makes flex items too narrow; they should stretch to fill width equally depending on no of flex items inside containing div. Also shouldn't require hard-coding the width */
}

<div id='container'>
  <div class='flex-item'>
    <p>ri bergber gyiruek weeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergerg</p>
  </div>
  <div class='flex-item'>
    <p>ri bergber gyiruew</p>
  </div>
  <div class='flex-item'>
    <p>ri bergber gyiruek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wrgber gyiruek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wg</p>
  </div>
</div>

Codepen: https://codepen.io/anon/pen/JgRawo

but you already accepted the solution so it make this a duplicate of : https://stackoverflow.com/a/29503264/8620333 — Temani Afif, Jul 26 '19 at 10:25
what is funny is that you accepted the answer which is exactly the same as the question I linked, so if you really think it's not a duplicate then I have nothing more to say — Temani Afif, Jul 27 '19 at 15:42

Nenad Vracar · Accepted Answer · 2019-07-26T10:29:04.223

This can be done using just flex: 1 property, which sets flex-grow: 1, flex-shrink: 1 and flex-basis value is different on different browsers, on chrome its 0%.

This way each element grows to equal size and its content is wrapped to match its width.

With your value of flex: 0 0 auto you set flex-basis to "look at my width property" which is going to depend on the content and then you also say do not shrink or grow.

#container {
  display: flex;
  justify-content: space-between;
  background: pink;
  width: 100%;
}
.flex-item {
  flex: 1;
  border: 1px solid red;
}

<div id='container'>
  <div class='flex-item'>
    <p>ri bergber gyiruek weeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergerg</p>
  </div>
  <div class='flex-item'>
    <p>ri bergber gyiruew</p>
  </div>
  <div class='flex-item'>
    <p>ri bergber gyiruek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wrgber gyiruek wveeuyrg eir7 gueruygergb
      e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wg</p>
  </div>
</div>

Simple flex problem - why aren't flex items the same size, without setting flex basis

1 Answers1