移动端.cart-items-container滚动异常及剩余空间填充问题

开发Web布局时，需求如下：

• .cart-items-container 占据 .cart-rest-details 上方的剩余空间，内容溢出时可滚动
• .cart-rest-details 固定在视口底部

但移动端布局出现异常：.cart-items-container 无法正确填充剩余空间，.cart-items 区域也无法按预期滚动。

代码实现 #

CSS 代码 #

.cart-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100vh;
}

.cart-items-container {
  display: flex;
  flex-direction: column;
}

.cart-items {
  padding: 8px;
  max-height: 300px;
  overflow: auto;
  background-color: #EEEEEE;
  border: 2px solid orange
}

.cart-rest-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 90%;
  padding: 5%;
  background-color: dodgerblue;
  color: white;
}

@media screen and (max-width: 768px) {
  .cart-items-container {
    flex-grow: 1;
  }

  .cart-items {
    flex-grow: 1;
    max-height: none;
  }
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="cart-container">
    <div class="cart-items-container">
      <h1>Cart Items</h1>

      <div class="cart-items">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
        <p>Item 4</p>
        <p>Item 5</p>
        <p>Item 6</p>
        <p>Item 7</p>
        <p>Item 8</p>
        <p>Item 9</p>
        <p>Item 10</p>
        <p>Item 11</p>
        <p>Item 12</p>
        <p>Item 13</p>
        <p>Item 14</p>
        <p>Item 15</p>
        <p>Item 16</p>
        <p>Item 17</p>
        <p>Item 18</p>
        <p>Item 19</p>
        <p>Item 20</p>
        <p>Item 21</p>
        <p>Item 22</p>
        <p>Item 23</p>
        <p>Item 24</p>
        <p>Item 25</p>
      </div>
    </div>

    <div class="cart-rest-details">
      <p>Description 1</p>
      <p>Description 2</p>
      <p>Description 3</p>
      <p>Description 4</p>
      <p>Description 5</p>
    </div>
  </div>
</body>

</html>

当前表现 #

预期表现 #

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