flex-direction 列中的相等高度而不设置高度

Question

我想要一个没有明确设置高度的 flex 容器，它的所有子级都具有相同的高度。我不太清楚如何实现这一点。

如果 flex 容器设置了高度，我可以让它工作，但我希望它的高度基于子级是动态的。同样，它们都应该相等（并根据最高的孩子计算）。我不想依赖 js 来做这个布局。

这是我目前所拥有的一个小提琴：https://jsfiddle.net/fL1gk17L/1/

HTML

<div id="wrapper" class="wrapper">
  <div class="inner">Some text</div>
  <div class="inner">Some text</div>
  <div class="inner">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
    Some text Some text </div>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
}

.inner {
  outline: 1px solid black;
  flex-grow: 1;
  flex-basis: 0;
}

Answer 1

尝试为父 div 设置display:flex;flex-wrap:wrap，为子列设置display:flex。您无需使用列高即可实现此目的。

.wrapper {
  display: flex;
  flex-wrap:wrap;
}

.inner {
  outline: 1px solid black;
  flex-grow: 1;
  flex-basis: 0;
  display:flex;
}

<div id="wrapper" class="wrapper">
  <div class="inner">Some text</div>
  <div class="inner">Some text</div>
  <div class="inner">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
    Some text Some text </div>
</div>