flexbox布局中如何避免大尺寸<ul>溢出body并让其自身生成滚动条

我此前很难准确表述遇到的问题，若当前表述仍不够清晰还请见谅。

我的应用中有3张卡片，左右两侧卡片包含的<ul>列表可能数据量极大，我希望滚动条出现在<ul>元素自身上，而非整个主窗口。

期望效果如下：

实际出现的异常效果如下：

我之前通过给列表设置max-height: 80vh得到了第一张截图的效果，但这是非常不灵活的方案，仅能在特定屏幕尺寸下生效。

多次点击「Add more items」按钮即可复现问题，核心CSS代码和基础HTML结构如下：

<div class="room-wrapper">
  <div><button class="btn btn-primary add-more-btn">Add more items</button></div>
  <div class="room-content">

    <div class="left-card app-card">
      <div class="left-card-wrapper">
        <div>
          <h3>Left Card</h3>
          <hr>
        </div>
        <ul class="my-list"></ul>
      </div>
    </div>

    <div class="main-card app-card"></div>

    <div class="right-card app-card">
      <div class="players-wrapper">
        <div>
          <h3>Right Card</h3>
          <hr>
        </div>
        <ul class="my-list"></ul>
      </div>
    </div>

  </div>
</div>

.room-wrapper {
  display: flex;
  flex-flow: column;
  height: 100%;
  padding: 10px;
}

.room-content {
  flex: 1 1 auto;
  text-align: center;
  
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.my-list {
  overflow-y: auto;
  
  /* 该设置可“解决”问题，但仅适配特定窗口尺寸，第一张截图就是用该设置实现的
  max-height: 80vh;
  */
}

修复方案 #

通过给各级父容器增加flex高度约束即可实现列表高度自适应，不需要固定的vh值：

1. 给卡片容器设置flex纵向布局，限制高度撑满父容器

.app-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

2. 给列表的直接父容器增加溢出隐藏规则，避免内容撑开父元素高度

.left-card-wrapper, .players-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

3. 调整列表样式，让它自动填充剩余高度

.my-list {
  flex: 1;
  overflow-y: auto;
  /* 移除之前的max-height: 80vh规则 */
}

实现逻辑 #

flex布局默认允许子元素溢出父容器，只有给父级明确加上overflow: hidden或者高度上限约束后，子元素的overflow-y: auto才会触发。调整后列表高度会自动适配父容器扣除标题区域后的剩余高度，所有屏幕尺寸下都只会在列表区域出现滚动条，不会触发页面全局滚动。

内容的提问来源于stack exchange，提问作者Levy Barbosa