购物车物品容器无法在移动设备上正确滚动

问题描述 投票：0回答：2

我正在开发一个网页布局，我需要 

.cart-items-container
来占据 
.cart-rest-details
部分上方的剩余空间。如果内容溢出，
.cart-items-container
应可滚动，并且 
.cart-rest-details
应保持固定在视口底部。但我在移动设备上遇到布局问题。

我附上了我的代码库。

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

在移动设备上，

.cart-items-container
无法正确填充 
.cart-rest-details
上方的剩余空间，并且 
.cart-items
部分不会按预期滚动。

当前行为：

current behavior

预期行为：

expected behavior

html css flexbox responsive-design
2个回答
0
投票

尝试将 

min-height: 0;
添加到 
.cart-items-container
。

因为默认情况下，即使 

min-content
设置为非零值，Flexbox 的子级也不会缩小到 
flex-shrink
以下（由其子级内容决定）。通过设置 
min-height: 0
可以覆盖此行为，使其能够正确收缩，从而滚动条将按预期显示。

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

.cart-items-container {
  display: flex;
  flex-direction: column;
  /* added */
  min-height: 0;
}

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

0
投票

我在您的 .cart 容器上添加了 

resize: both
，以便您可以从右下角拖动以查看其如何适应：

body {
  margin: 1vh;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 0;
}

.cart-container {
  resize: both;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 98vh;
}

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

.cart-items {
  padding: 8px;
  overflow: auto;
  background-color: #EEEEEE;
  border: 2px solid orange;
  height: 50px;
  flex-grow: 1;
}

.cart-rest-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 90%;
  padding: 5%;
  background-color: dodgerblue;
  color: white;
}
<!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>

Flexbox 算法将您的最大高度视为首选高度，并且不会收缩到低于它，因此设置超低高度并允许 Flex Growth 为我们发挥魔力应该会产生所需的结果

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.