How to maintain uniform item height for stretched Flex items even when word wrapping?

Question

I'm successfully using a Flex layout to arrange multiple items (with dynamic texts) in a row. The flex-wrap: wrap; rule works great for wrapping the row in case there are many items.

The (default) align-items: stretch; rule ensures that all items have equal height, which I like. Alas, it appears that this 'equal height' logic only applies to each row. Here's an example demonstrating this:

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid gray;
  padding-top: 0.5em;
  padding-left: 0.5em;
}

.label {
  border: 1px solid gray;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
}

<div class="container">
  <div class="label">Windows</div>
  <div class="label">HTML</div>
  <div class="label">Functional<br>Programming</div>
  <div class="label">Hewlett<br>Packard</div>
  <div class="label">OS/2 Warp</div>
  <div class="label">Borland Pascal</div>
  <div class="label">Motorola</div>
  <div class="label">Assembler</div>
  <div class="label">Binary</div>
  <div class="label">Logic</div>
  <div class="label">Example</div>
  <div class="label">Compiler</div>
  <div class="label">Recursion</div>
</div>

Making the browser narrow enough will cause the row of items to wrap. At this point, the items in the first row are taller (due to some items having more than one line of text) than in the second row. E.g. the above box with the text Recursion most likely has a smaller height than the box with the text Windows.

This difference in heights is what I'd like to avoid (without giving up on wrapping): is there a way to have something like align-items: stretch; independently of whether the row of items is wrapped, such that all items always have the same height?

the is the job of CSS grid if you are open to it (related : https://stackoverflow.com/q/55463210/8620333) — Temani Afif, Apr 05 '19 at 19:20
@TemaniAfif Alas, I failed to get this line-wrapping behaviour with grid layouts which I get with the flex layout. — Frerich Raabe, Apr 05 '19 at 20:15
you can have the wrapping but you will probably face a width issue (ex: https://jsfiddle.net/4v7gdt6f/) — Temani Afif, Apr 05 '19 at 20:22

score 1 · Accepted Answer · answered Apr 05 '19 at 18:59

I made with a little javascript.

let highest = 0;

let labels = document.querySelectorAll(".label");
labels.forEach(function(p){
if(p.offsetHeight > highest)
  highest = p.offsetHeight;
});

labels.forEach(function(p){
  p.style.height = highest + "px";
});

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid gray;
  padding-top: 0.5em;
  padding-left: 0.5em;
}

.label {
  border: 1px solid gray;
  margin-bottom: 0.5em;
  margin-right: 0.5em;

}

<div class="container">
  <div class="label">Windows</div>
  <div class="label">HTML</div>
  <div class="label">Functional<br>Programming</div>
  <div class="label">Hewlett<br>Packard</div>
  <div class="label">OS/2 Warp</div>
  <div class="label">Borland Pascal</div>
  <div class="label">Motorola</div>
  <div class="label">Assembler</div>
  <div class="label">Binary</div>
  <div class="label">Logic</div>
  <div class="label">Example</div>
  <div class="label">Compiler</div>
  <div class="label">Recursion</div>
</div>

score 0 · Answer 2 · answered Apr 06 '19 at 01:43

May be this will work.

.container {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid gray;
    padding-top: 0.5em;
    padding-left: 0.5em;
}

.label {
    border: 1px solid gray;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    height:100px;
}

How to maintain uniform item height for stretched Flex items even when word wrapping?

2 Answers2