Html 是否可以强制一根flexbox柱不超过另一根柱的高度？

基本上，主题说明了一切

<div class="container">
  <div class="column1">
    Some text
  </div>
  <div class="column2">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

一些文本

项目
项目
项目
项目

我希望

column2

的高度为

column1

内容的高度，并且对于列表的其余部分可以滚动

---

可以使用纯flexbox？

在

容器上显示
flex
，但这不是必需的

诀窍是将第2列设置为
display:absolute


.container{
显示器：flex；
宽度：200px；
位置：相对位置；
}
.专栏1{
背景色：红色；
弹性：1；
}
.专栏2{
位置：绝对位置；
排名：0；
左：100%；
身高：100%；
宽度：100%；
背景色：青色；
溢出：自动；
}

Bla

Bla

Bla

Bla

Bla

Bla

Bla

Bla

bla2
bla2
bla2

bla2
bla2
bla2

bla2
bla2
bla2

bla2
bla2
bla2

bla2
bla2
bla2

bla2
bla2
bla2