Html 弯曲方向柱中的等高,无需设置高度

Html 弯曲方向柱中的等高,无需设置高度,html,css,flexbox,Html,Css,Flexbox,我想要一个flex容器,它没有一个显式的高度设置,它的所有子容器的高度都相等。我不太明白如何实现这一点 如果flex容器设置了高度,我可以让它工作,但我希望它的高度基于子对象是动态的。同样,它们应该是相等的(并根据最高的子级进行计算)。我不想依赖js来完成这个布局 以下是我迄今为止所拥有的一把小提琴: HTML <div id="wrapper" class="wrapper"> <div class="inner">Some text</div> &

我想要一个flex容器,它没有一个显式的高度设置,它的所有子容器的高度都相等。我不太明白如何实现这一点

如果flex容器设置了高度,我可以让它工作,但我希望它的高度基于子对象是动态的。同样,它们应该是相等的(并根据最高的子级进行计算)。我不想依赖js来完成这个布局

以下是我迄今为止所拥有的一把小提琴:

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>

尝试设置
display:flex;柔性换行:父div换行
,子列设置显示:柔性。您可以在不使用柱高度的情况下实现这一点

.wrapper{
显示器:flex;
柔性包装:包装;
}
.内部{
外形:1px纯黑;
柔性生长:1;
弹性基准:0;
显示器:flex;
}

一些文本
一些文本
一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字
一些文本一些文本

等高行功能是,但是。这不是要求的。包装器必须有一个flex-direction:列,您只需使用flexbox的基本功能即可。
.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
}

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