如何通过CSS调整布局：让缺货按钮不溢出且商品描述可滚动

需求 #

• 确保「Out Of Stock」按钮完全显示在弹窗容器内，无溢出
• 商品描述区域适配按钮位置，溢出文本可滚动查看

原始代码 #

HTML #

<div class="productView" style="display: flex;">
  <div class="product">
    <i class="fa fa-times fa-2x cross"></i>
    <img src="../img/crossiant.webp">
    <span>
      <div class="tag">
        <h6>Out Of Stock</h6>
      </div>
      <h3 class="pname">
        Crossiant (2pcs)
        <i class="fa fa-heart-o heart"></i>
      </h3>
      <h3 class="pdesc">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
        took a galley of type and scrambled it to make a type specimen book.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </h3>
      <h4 class="price-view" align="center">
        <span>₹0</span>
        <span class="price-cut-view">
          <s></s>
        </span>
      </h4>
      <p>
        <a class="cart_btn oos">Out Of Stock</a>
      </p>
    </span>
  </div>
</div>

CSS #

.productView {
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, .8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.productView .product {
  padding: 0.75rem;
  text-align: center;
  background: #fff;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 50%);
  margin: auto;
  max-width: 800px;
  border-radius: 13px;
  min-width: 800px;
}

.productView .product img {
  max-height: 100%;
  max-width: 100%;
  border-radius: 13px;
  object-fit: cover;
}

.productView .product .cross {
  position: absolute;
  right: 5px;
  cursor: pointer;
  color: #444;
}

.productView .product span {
  align-self: center;
}

.productView .product .pname {
  font-size: 3vh;
}

.productView .product .pdesc {
  font-size: 2.1vh;
  margin: -5px 4px -10px 6px;
}

@media (max-width: 600px) {
  .productView .product {
    display: inline-block;
    max-width: 60%;
    padding: 0.5rem;
    min-width: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70%;
    height: fit-content;
  }
  .productView .product img {
    max-width: 80%;
  }
  .productView .product .pname {
    font-size: 2.75vh;
  }
  .productView .product .pdesc {
    font-size: 2vh;
    margin: -5px 4px -5px 4px;
  }
}

移动端问题截图 #

修复方案 #

修改后的HTML（仅给内容区span添加类名，便于精准控制） #

<div class="productView" style="display: flex;">
  <div class="product">
    <i class="fa fa-times fa-2x cross"></i>
    <img src="../img/crossiant.webp">
    <!-- 添加product-info类名 -->
    <span class="product-info">
      <div class="tag">
        <h6>Out Of Stock</h6>
      </div>
      <h3 class="pname">
        Crossiant (2pcs)
        <i class="fa fa-heart-o heart"></i>
      </h3>
      <h3 class="pdesc">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
        took a galley of type and scrambled it to make a type specimen book.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </h3>
      <h4 class="price-view" align="center">
        <span>₹0</span>
        <span class="price-cut-view">
          <s></s>
        </span>
      </h4>
      <p>
        <a class="cart_btn oos">Out Of Stock</a>
      </p>
    </span>
  </div>
</div>

修改后的CSS #

.productView {
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, .8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.productView .product {
  padding: 0.75rem;
  text-align: center;
  background: #fff;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 50%);
  margin: auto;
  max-width: 800px;
  border-radius: 13px;
  min-width: 800px;
}

.productView .product img {
  max-height: 100%;
  max-width: 100%;
  border-radius: 13px;
  object-fit: cover;
}

.productView .product .cross {
  position: absolute;
  right: 5px;
  cursor: pointer;
  color: #444;
}

.productView .product .product-info {
  align-self: center;
  /* 桌面端保持原有布局 */
  display: block;
}

.productView .product .pname {
  font-size: 3vh;
}

.productView .product .pdesc {
  font-size: 2.1vh;
  margin: -5px 4px -10px 6px;
}

@media (max-width: 600px) {
  .productView .product {
    /* 改为flex垂直布局，替代inline-block，便于高度分配 */
    display: flex;
    flex-direction: column;
    max-width: 60%;
    padding: 0.5rem;
    min-width: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70%;
    /* 移除height: fit-content，让flex自动控制高度 */
  }
  .productView .product img {
    max-width: 80%;
    /* 图片下方留间距 */
    margin-bottom: 1rem;
  }
  /* 移动端商品信息容器设置flex布局，占满剩余空间 */
  .productView .product .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .productView .product .pname {
    font-size: 2.75vh;
    /* 标题下方留间距 */
    margin-bottom: 0.5rem;
  }
  .productView .product .pdesc {
    font-size: 2vh;
    margin: 0 4px 0.5rem 4px;
    /* 描述区域占满剩余空间，溢出时滚动 */
    flex: 1;
    overflow-y: auto;
    /* 可选：添加内边距优化滚动体验 */
    padding-right: 0.25rem;
  }
  /* 让按钮容器固定在信息区底部 */
  .productView .product .product-info p {
    margin-top: auto;
  }
}

关键调整说明 #

1. 移动端弹窗布局改为flex垂直排列：替代原有的inline-block，让内部元素（图片、商品信息）能按垂直方向分配空间，避免内容溢出容器。
2. 商品信息容器设置flex属性：.product-info设置flex:1，占满弹窗的剩余垂直空间，同时overflow:hidden确保内部元素不会超出容器。
3. 描述区域添加滚动功能：.pdesc设置flex:1和overflow-y:auto，自动填充信息区的剩余空间，文本过长时显示垂直滚动条。
4. 按钮固定在底部：按钮所在的p标签设置margin-top:auto，利用flex布局的特性将按钮推到信息区的底部，保证不会被描述文本挤出去。
5. 移除冗余属性：删除height: fit-content，让flex布局自动控制弹窗高度，适配内容和容器限制。

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