求助：含三个100vw宽度子元素的Div容器仅显示两个元素

问题根源 #

你的问题出在**.container的justify-content: center属性**以及flex容器的布局逻辑上：

• 你将.container与.chapters合并为同一个元素，这个元素作为flex容器，子元素是3个.chapter，每个宽度100vw，总宽度达到300vw。
• justify-content: center会让子元素在容器的**原始宽度（100vw）**范围内居中排列，直接导致第一个.chapter被完全推到视口左侧之外，只能看到后面两个元素的部分或全部。
• 浏览器开发者工具能看到所有元素，是因为元素本身存在，只是不在可视区域内。

解决方案 #

要让3个.chapter横向排列且都能通过滚动查看，需要做以下调整：

1. 移除.container中的justify-content: center和align-items: center，不需要将章节居中。
2. 给flex容器添加overflow-x: auto，允许横向滚动。
3. 给.chapter添加flex-shrink: 0，防止子元素被压缩，保证每个元素严格占100vw宽度。
4. 可以去掉.chapters的min-width: 100vw，子元素总宽度已经足够撑开容器。

修改后的代码 #

CSS

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow-x: auto; /* 允许横向滚动 */
}

.chapters {
  background-color: bisque;
  flex-direction: row;
}
.chapters .chapter {
  min-width: 100vw;
  height: 100vh;
  background-color: red;
  border: 1px solid white;
  flex-shrink: 0; /* 禁止压缩子元素 */
}

HTML（无需改动）

<div class="container chapters">
  <div class="chapter"></div>
  <div class="chapter"></div>
  <div class="chapter"></div>
</div>

可选增强体验 #

如果想要实现类似全屏滑动的对齐效果，可以给.container添加scroll-snap-type: x mandatory，给.chapter添加scroll-snap-align: start，滚动时会自动对齐到每个章节的开头：

.container {
  /* 原有样式 */
  scroll-snap-type: x mandatory;
}
.chapters .chapter {
  /* 原有样式 */
  scroll-snap-align: start;
}

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