html - html/css flex：使一个项目自身和容器按高度拉伸，其他在同一个容器中可滚动

Question

我想在同一个弹性容器中有两个具有不同行为的项目。第一项应该在添加内容时拉伸自己以及容器高度。

但是第二个应该适合容器的高度，并且当超过滚动条时应该出现。

flexbox可以吗？

容器中的项目是否有任何方法可以拉伸自己的高度，超过容器的高度，越过容器的边界？

<div style="display: flex; background: #f1f1f1; min-height: 100vh">
  <div style="width:50%; margin:10px;background: aliceblue">
    1<br>1<br>1<br>1<br>... this should stretch itself and container
  </div>
  <div style="width:50%; margin:10px;background: antiquewhite">
    2<br>2<br>2<br>2<br>... this should be scrollable
  </div>
</div>

标签： htmlcssflexbox