Html 如何将某些 div 的高度限制为具有 display flex 行的同一父 div 中的其他 div

.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;
}

.flexible {
  display: flex;
  flex-direction: column;
}

.flexible .flexible-child {
  flex-basis: 0px;
  overflow: auto;
  flex-grow: 1;
}

<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 flexible">
    <div class="flexible-child">
      <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>
  <div class="list-container flexible">
    <div class="flexible-child">
      <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>
  <div class="list-container">
    <h2>List D</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</div>