How to Make Flexbox Items the Same Size

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;

Can I shrink flexbox items into same size when flex items are bigger than the flex container?

I would use display: grid instead of display: flex to achieve this. Here is an example:

.flex-container {  font-size: 12px;  display: grid;  grid-template-columns: 1fr;  grid-template-rows: repeat(2, minmax(minmax(0, auto), 50%));  width: 200px;  height: 500px;  border: 1px solid #dadfe3;}
.flex-item {  min-height: 0;  overflow: auto;  margin: 0 20px;}
.flex-item div {  margin: 4px 0;  background-color: #f0f9ff;  color: #2f88ff;}

<body>  <div class="flex-container">    <div class="flex-item">      <input type="text" placeholder="filter 1">      <div>item content 1</div>      <div>item content 2</div>      <div>item content 3</div>      <div>item content 4</div>      <div>item content 5</div>      <div>item content 6</div>    </div>    <div class="flex-item">      <input type="text" placeholder="filter 2">      <div>item 1</div>      <div>item 2</div>      <div>item 3</div>      <div>item 4</div>      <div>item 5</div>      <div>item 6</div>      <div>item 7</div>      <div>item 8</div>      <div>item 9</div>      <div>item 10</div>      <div>item 11</div>      <div>item 12</div>      <div>item 13</div>      <div>item 14</div>      <div>item 15</div>    </div>  </div></body>

How to make all items the same width in a wrappable flexbox?

I want all items to have the same width, so I applied the following CSS attributes: flex-basis: 0 and flex-grow: 1.

That's a wrong approach. With flex-grow you are distributing free space in the container. Since the length of the content is different in each item, the free space will be different in each line. Hence, the columns won't align across rows, despite each item having flex-basis: 0.

With that, each item in every column should have had the same width, independently from its original width.

Actually, per the info I posted above, "With that, each item in every row should have had the same width, independently from its original width."

ul {  display: flex;  flex-wrap: wrap;  margin: 0;  padding: 0;}
li {  flex-basis: 0;  flex-grow: 1;  white-space: nowrap;  list-style-type: none;  border: 1px dashed red;}

<ul>  <li>Long name</li>  <li>Long name</li>  <li>Short name</li>  <li>Short name</li>  <li>Short name</li>  <li>Short name</li>  <li>Short name</li>  <li>Long name</li>  <li>Long long long name</li>  <li>Long name</li>  <li>Long name</li>  <li>Long long long name</li>  <li>Long long long name</li>  <li>Long long long name</li>  <li>Long long long name</li>  <li>Short name</li>  <li>Long name</li>  <li>Long long long name</li>  <li>Long long long name</li>  <li>Long name</li>  <li>Short name</li></ul>

Make flex items have equal width in a row

Flexbox method

In order to make the text items (.section-child) equal width, you need to use flex: 1 1 0, which you have done. This is the same as saying flex: 1.

However, this by itself doesn't achieve the goal for two reasons:

The parent of .section-child, a flex container, but also a flex item in a larger container, is limited to the width of its content, by default. So it won't expand and the text can overflow the container. You need to apply flex: 1 to .section, as well.
A flex item cannot be smaller than the size of its content, by default. The initial setting is min-width: auto. So flex: 1 cannot work to equally distribute container space, because a flex item cannot shrink past the longest item. You need to override this behavior with min-width: 0.

.top-level {  display: flex;  flex-flow: row wrap;}
.section {  display: flex;  flex-flow: row nowrap;  border: 1px solid;  margin-right: 12px;  margin-top: 12px;  flex: 1;  min-width: 0;}
.section-child {  display: flex;  flex-flow: column nowrap;  align-items: center;  flex: 1;  min-width: 0;}
.child-title {  white-space: nowrap;}
.vertical-separator {  width: 1px;  background-color: rgba(0, 0, 0, 0.3);  margin: 8px;}

<div class="top-level">  <section class="section">    <div class="section-child">      <h4 class="child-title">Title</h4>      <!--A lot more content here-->    </div>    <div class="vertical-separator"></div>    <div class="section-child">      <h4 class="child-title">Longer title</h4>      <!--A lot more content here-->    </div>    <div class="vertical-separator"></div>    <div class="section-child">      <h4 class="child-title">Much much longer title</h4>      <!--A lot more content here-->    </div>  </section>  <section class="section">    <div class="section-child">      <h4 class="child-title">Title</h4>      <!--A lot more content here-->    </div>    <div class="vertical-separator"></div>    <div class="section-child">      <h4 class="child-title">Longer title</h4>      <!--A lot more content here-->    </div>    <div class="vertical-separator"></div>    <div class="section-child">      <h4 class="child-title">Much much longer title</h4>      <!--A lot more content here-->    </div>  </section>  <section class="section">    <div class="section-child">      <h4 class="child-title">Title</h4>      <!--A lot more content here-->    </div>    <div class="vertical-separator"></div>    <div class="section-child">      <h4 class="child-title">Longer title</h4>      <!--A lot more content here-->    </div>    <div class="vertical-separator"></div>    <div class="section-child">      <h4 class="child-title">Much much longer title</h4>      <!--A lot more content here-->    </div>  </section></div>

How to make flexbox items of equal width and height

You are almost good, the li are equal height but not their content. Simply add height: 100%;

body {  font-family: Lucida, sans-serif;}
nav ul {  list-style-type: none;  margin: 0;  padding: 0;      display: flex;  justify-content: space-between;  /*align-items: stretch;  not needed, it's by default*/}  nav li {  flex-grow: 1;  flex-shrink: 1;  flex-basis: 0;  text-align: center; }nav a {  text-decoration: none;  color: #000;  border: 2px solid rgb(20, 60, 168);  background-color: rgba(20, 60, 168, .2);  padding: 10px 10px 8px;  display: block;  height:100%;  box-sizing:border-box; /*Don't forget this*/}

<nav>  <ul>    <li><a href="#">First</a></li>    <li><a href="#">Second</a></li>    <li><a href="#">The third seems to be quite long</a></li>    <li><a href="#">Fourth</a></li>  </ul></nav>

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

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>

Flexbox - Set flex item size based total number of items

How about this:

#container {
  display: flex;
  border: 4px solid black;
  padding: 3px;
  width: 600px;
}

.box {
  flex: 1 1 0px;
  border: 2px solid grey;
  padding: 2px;
}

<div id="container">
  <div class="box">We choose to go to the Moon...We choose to go to the Moon in this decade and do the other things, not because they are easy, but because they are hard.</div>
  <div class="box">Hello World</div>
  <div class="box"></div>
  <div class="box">Never Gonna Give You Up, Never Gonna Let You Down</div>
 </div>

How to Make Flexbox Items the Same Size