Как сохранить одинаковую высоту элемента для растянутых элементов Flex даже при переносе слов?

Question

Я успешно использую макет Flex, чтобы расположить несколько элементов (с динамическими текстами) в ряд. Правило flex-wrap: wrap; отлично подходит для переноса строки, если в ней много элементов.

Правило (по умолчанию) align-items: stretch; гарантирует, что все элементы имеют одинаковую высоту, что мне нравится. Увы, похоже, что эта логика «равной высоты» применима только к каждой строке. Вот пример, демонстрирующий это:

.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>

Если сделать браузер достаточно узким, ряд элементов будет перенесен. На этом этапе элементы в первом ряду выше (из-за того, что некоторые элементы имеют более одной строки текста), чем во втором ряду. Например. вышеприведенное поле с текстом Рекурсия , скорее всего, имеет меньшую высоту, чем поле с текстом Windows .

Эту разницу в высоте я бы хотел избежать (не отказываясь от переноса): есть ли способ получить что-то вроде align-items: stretch; независимо от того, обернут ли ряд элементов, чтобы все элементы всегда имели такой же высоты?

Answer 1

Я сделал с небольшим 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>

Answer 2

Может быть, это будет работать.

.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;
}