设置overflow属性后小视口内容仍无法滚动的问题求助

问题根源 #

当前代码存在两个关键问题导致滚动失效：

• .even-content的子元素设置了flex:1，会强制容器收缩适配父元素宽度，无法超出视口，自然触发不了滚动
• .container使用width:100%，没有固定/最小宽度限制，会随视口缩小而压缩，达不到"保持尺寸不变"的要求

修复方案 #

按以下步骤修改CSS：

1. 删除.even-content>*的flex:1规则，让子容器能保持自身尺寸
2. 给.container设置固定宽度（比如和图片一致的900px），或者min-width:900px，确保容器不会被压缩
3. 给.even-content明确设置overflow-x: auto（原overflow:auto也生效，但指定x轴更直观），同时移除无用的white-space: nowrap（flex布局不需要这个属性）

修改后的完整CSS代码 #

.block-content {
  width: 100%;
  height: 100%;
}

.block-content .even-content {
  display: flex;
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow-x: auto; /* 明确开启水平滚动 */
}

.container {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 900px; /* 固定宽度，匹配图片尺寸 */
  /* 若需要大屏时容器拉伸，可替换为min-width:900px */
}

.image {
  width: 100%;
  height: 100%;
  transition: all .5s ease;
  object-fit: cover;
  object-position: center;
}

.card-text {
  padding: 3.75rem;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
}

.card-text h3 {
  color: white;
  margin-bottom: 2rem;
  font-size: 2.25rem;
}

.card-text .fa-arrow-right {
  margin-right: 10px;
}

.container:hover .image {
  transform: scale(1.03);
}

效果说明 #

修改后，当视口宽度小于所有.container的总宽度时，.even-content会自动出现水平滚动条，同时每个图片容器保持固定宽度不会被压缩。如果需要容器在大屏时占满可用空间，可将.container的width:900px替换为min-width:900px，这样容器在宽视口中会拉伸，小视口中保持最小宽度并触发滚动。

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