Можно ли сделать все дочерние элементы flexbox «flex-flow: column» такой же высоты, как самый высокий дочерний элемент?

Question

Если у меня есть flexbox, стилизованный под flex-flow: column, и в этом контейнере есть пять дочерних элементов div с переменной высотой, возможно ли сделать так, чтобы все дочерние элементы имели одинаковую высоту с самой высокой?

Я не обязательно собираюсь заполнить контейнер ими (т. Е. Сделать так, чтобы они заполнили все лишнее пространство), просто все должны быть одинаковой высоты.

В приведенном ниже фрагменте все пять дочерних элементов div имеют разное содержание, что приводит к разной высоте; Можно ли сделать так, чтобы все пять были такими же высокими, как самый верхний div, в котором больше всего контента?

html {
    font-family: Arial, sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    border: none;
    margin: 0;
    padding: 0;
}

body {
  background: #333;
  color: #333;
}

.container {
  background: firebrick;
  display: flex;
  flex-flow: column;
  height: 50rem;
  margin: 0 auto;
  padding: 1rem;
  width: 30rem;
}

.panel {
  background: white;
  padding: 1rem;
}

.panel:nth-child(even) {
  background: lightgrey;
}

<div class="container">
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
  <div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class="panel">this is a test</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>

Answer 1

Если вы не возражаете, они растягиваются, чтобы соответствовать высоте контейнера, вы можете установить для детей flex-basis до 20%:

html {
    font-family: Arial, sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    border: none;
    margin: 0;
    padding: 0;
}

body {
  background: #333;
  color: #333;
}

.container {
  background: firebrick;
  display: flex;
  flex-flow: column;
  height: 50rem;
  margin: 0 auto;
  padding: 1rem;
  width: 30rem;
}

.panel {
  background: white;
  padding: 1rem;
  flex-basis: 20%;
}

.panel:nth-child(even) {
  background: lightgrey;
}

<div class="container">
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
  <div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class="panel">this is a test</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>

Answer 2

Простой ответ - «нет». Flexbox распределяет пространство между элементами Flex в зависимости от размера контейнера, а не от размера отдельного брата. Вам нужно будет использовать скрипт.

Answer 3

Вы можете сделать это с помощью flex-basis, с тем уловкой, что вам нужно знать, сколько будет детей. Вы также можете использовать flex-grow, но это только распределяет доступное дополнительное пространство, поэтому самые высокие элементы будут все же выше, чем более короткие:

html {
    font-family: Arial, sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    border: none;
    margin: 0;
    padding: 0;
}

body {
  background: #333;
  color: #333;
}

.container {
  background: firebrick;
  display: flex;
  flex-flow: column;
  height: 50rem;
  margin: 0 auto;
  padding: 1rem;
  width: 30rem;
}

.panel {
  background: white;
  padding: 1rem;
flex-basis: 20%;
}

.panel:nth-child(even) {
  background: lightgrey;
}

<div class="container">
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
  <div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class="panel">this is a test</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>