图像溢出.container-wrapper，尽管溢出：隐藏；不工作

Question

我正在为一个网站开发一个自定义部分，其中我有一个包含文本和多个图像的 .container-wrapper 元素。容器应该有溢出：隐藏；以防止溢出问题。然而，.images-wrapper 内的图像仍然溢出容器的边界。

这是我的 HTML 和 CSS 结构的简化版本：

<section class="custom-section">
  <div class="container-wrapper">
    <!-- Text and other content -->
    
    <div class="images-wrapper">
      <img src="image1.jpg" alt="Image 1">
      <img src="image2.jpg" alt="Image 2">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
</section>

.custom-section {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 650px; /* Adjust as needed */
}

.custom-section .container-wrapper {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 100%; /* Adjust as needed */
  overflow: hidden; /* Should hide overflow */
}

.custom-section .images-wrapper {
  width: 100%; /* Adjust as needed */
  height: 100%; /* Adjust as needed */
  position: absolute;
  left: 0; /* Adjust as needed */
  display: flex;
  gap: 30px;
}

.custom-section .images-wrapper img {
  width: 300px; /* Adjust as needed */
  height: 430px; /* Adjust as needed */
}

尽管在

overflow: hidden;

上设置

.container-wrapper

，

.images-wrapper

中的最后一个图像仍然明显溢出。我检查了宽度和位置，一切似乎都是正确的。

什么可能导致此问题？如何确保

overflow: hidden;

有效隐藏 .container-wrapper 中溢出的图像？

这就是现在的样子：

这是现在的样子

Answer 1

由于

.container-wrapper

没有特定的

width

，因此

overflow: hidden

不会产生任何效果。只需添加一个

max-width

就可以了，就像这样：

.custom-section {
  position: relative;
  width: 100%; 
  height: 650px; 
}

.custom-section .container-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    max-width: 1100px; /*this is the important new code. Adjust as desired*/
}

.custom-section .images-wrapper {
  width: 100%; 
  height: 100%; 
  position: absolute;
  left: 0; 
  display: flex;
  gap: 30px;
}

.custom-section .images-wrapper img {
  width: 300px; 
  height: 430px; 
}

<section class="custom-section">
  <div class="container-wrapper">
    <!-- Text and other content -->

    <div class="images-wrapper">
      <img src="https://picsum.photos/200/300" alt="Image 1">
      <img src="https://picsum.photos/200/300" alt="Image 2">
      <img src="https://picsum.photos/200/300" alt="Image 3">
      <img src="https://picsum.photos/200/300" alt="Image 4">
    </div>
  </div>
</section>