html - 是否可以使“flex-flow：column”flexbox 的所有子级与最高的子级具有相同的高度？

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>

标签： htmlcssflexbox

Answer 1

简单回答是不”。Flexbox 根据容器的大小在弹性项目之间分配空间，而不是特定同级的大小。您需要使用脚本。