弯曲方向列的高度相等，无需设置高度

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

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

这是我到目前为止所拥有的小提琴：https://jsfiddle.net/fL1gk17L/1/ 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;
}

Try set display:flex;flex-wrap:wrap对于父 div 和 setdisplay: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>