能否实现带滚动条且显示左右溢出内容的垂直图片列表？

直接给同一个元素组合overflow: scroll和overflow: visible是行不通的——因为CSS规则里，当你给元素设置overflow-y: scroll/auto时，overflow-x: visible会被浏览器强制转换成auto，没法实现左右溢出可见的效果。

要达成你的需求，得用两层嵌套容器：

• 外层是你的固定最大宽度主容器，设置overflow-x: visible，负责承载所有内容（标题、文本、滚动区域等）
• 内层专门做滚动容器，宽度设为100%，overflow-y: scroll，图片列表放在这个内层容器里，图片宽度可以超出内层容器的宽度，这样外层容器的overflow-x: visible就能让图片左右溢出部分显示出来，同时滚动条只出现在内层容器（也就是主容器内部）

代码示例 #

<!-- 外层主容器 -->
<div class="main-container">
  <h1>标题内容</h1>
  <p>这里是文本内容...</p>
  
  <!-- 内层滚动容器 -->
  <div class="scroll-container">
    <div class="image-list">
      <img src="你的图片地址1" alt="图片1">
      <img src="你的图片地址2" alt="图片2">
      <img src="你的图片地址3" alt="图片3">
      <!-- 更多图片 -->
    </div>
  </div>
</div>

.main-container {
  max-width: 800px; /* 你的固定最大宽度 */
  margin: 0 auto;
  overflow-x: visible;
  border: 1px solid #ccc; /* 方便看容器范围，可去掉 */
}

.scroll-container {
  width: 100%;
  max-height: 400px; /* 滚动区域的高度，按需调整 */
  overflow-y: scroll;
  /* 可选：隐藏滚动条的默认样式，自定义更美观的滚动条 */
  scrollbar-width: thin;
}

.image-list img {
  width: 120%; /* 让图片宽度超出内层容器，实现左右溢出 */
  height: auto;
  margin: 10px 0;
}

/* 可选：自定义滚动条样式（webkit内核浏览器） */
.scroll-container::-webkit-scrollbar {
  width: 8px;
}
.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.scroll-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

这样设置后，滚动条会被限制在内层的scroll-container里（也就是主容器内部），而图片因为宽度超过内层容器，外层主容器的overflow-x: visible会让左右溢出的部分完整显示，完全符合你的需求。

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