html - 是否可以让 `flex-flow: column` flexbox 的所有 child 都与最高的 child 一样高？

Question

如果我有一个使用 flex-flow: column 设置样式的 flexbox，并且该容器有五个高度可变的子 div，是否可以使所有 child 和最高的一样高？

我不一定要用它们填充容器(即让它们填充任何多余的空间)，只要高度相同即可。

在下面的代码片段中，五个子 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

简单的回答是“不”。 Flexbox 根据容器的大小而不是特定兄弟项的大小在 flex 元素之间分配空间。您需要使用脚本。