Flex横向布局中如何动态限制指定子Div高度并实现滚动

我有一个设置了display:flex; flex-direction: row; flex-wrap: wrap;的父div，内部包含a、b、c、d四个子div，每个子div内都带有多个列表项的<ul></ul>，具体结构如下：

<style>
  .flex-container {
    display: flex;
    flex-direction: row;
  }

  .list-container {
    padding: 10px;
    border: 1px solid black;
  }

  .list-container h2 {
    margin-top: 0;
  }

  .list-container ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 20px;
  }
</style>

<div class="flex-container">
  <div class="list-container">
    <h2>List A</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="list-container">
    <h2>List B</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
    </ul>
  </div>
  <div class="list-container">
    <h2>List C</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
      <li>Item 16</li>
      <li>Item 17</li>
      <li>Item 18</li>
      <li>Item 19</li>
    </ul>
  </div>
  <div class="list-container">
    <h2>List D</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</div>

其中b和c的列表项可能非常多，需要限制它们的高度，且不能通过CSS固定a和d的高度，要求将b和c的高度限制为其他所有子div的最大高度，超出时实现滚动。

要实现这个需求，我们可以利用Flex布局的等高特性结合滚动容器设置，具体操作如下：

核心修改思路 #

1. 利用Flex的align-items: stretch特性让所有子容器高度自动匹配最高的子项（即a或d中较高的那个）
2. 给子容器设置垂直Flex布局，让标题和列表垂直分布，保证标题不被压缩
3. 给b、c的列表添加滚动属性，让超出容器高度的内容滚动显示

修改后的完整代码 #

<style>
  .flex-container {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* 强制所有子项高度一致 */
  }

  .list-container {
    padding: 10px;
    border: 1px solid black;
    display: flex;
    flex-direction: column; /* 内部元素垂直排列 */
  }

  .list-container h2 {
    margin-top: 0;
    flex-shrink: 0; /* 标题固定高度，不被压缩 */
  }

  .list-container ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 20px;
  }

  /* 针对需要滚动的列表容器 */
  .scrollable-list ul {
    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
    flex: 1; /* 占据容器剩余高度 */
  }
</style>

<div class="flex-container">
  <div class="list-container">
    <h2>List A</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="list-container scrollable-list">
    <h2>List B</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
    </ul>
  </div>
  <div class="list-container scrollable-list">
    <h2>List C</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
      <li>Item 16</li>
      <li>Item 17</li>
      <li>Item 18</li>
      <li>Item 19</li>
    </ul>
  </div>
  <div class="list-container">
    <h2>List D</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</div>

原理说明 #

• Flex等高匹配：父容器的align-items: stretch会让所有子.list-container自动继承最高子项的高度，这个最高子项就是a或d中内容较多的那个
• 垂直布局保护标题：.list-container设置flex-direction: column后，内部的标题和列表垂直分布，flex-shrink: 0确保标题始终完整显示，不会被列表压缩
• 滚动列表限制高度：给b、c的<ul>设置flex:1让它填充容器的剩余高度，overflow-y:auto在内容超出容器高度时自动显示滚动条，从而让b、c的整体高度和a、d保持一致

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