Flex nowrap致非Flex元素内容溢出，父容器加overflow:hidden是否合理？

你给父容器#ap-container添加overflow:hidden的做法是合理的CSS布局技巧，但更精准的方案是直接对目标滚动容器配置属性，避免影响父容器内的其他内容，下面详细说明：

问题根源 #

当你给#scroll-years设置flex-wrap:nowrap时，flex子项会强制在一行排列。而flex容器默认的min-width:auto特性会让容器被内部内容撑开，打破你设置的width/max-width限制，进而导致父容器也被撑宽溢出。

正确实现步骤（支持滚动） #

要让仅#scroll-years内的内容横向溢出并支持滚动，只需修改该容器的CSS：

#scroll-years {
  width: 80%;
  max-width:75em;
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  flex-wrap:nowrap; /* 强制内容不换行 */
  overflow-x:auto; /* 开启横向滚动，替代overflow:hidden让用户可滚动查看 */
  min-width:0; /* 关键：打破flex容器默认最小宽度限制，让容器遵守自身宽度设置 */
  margin:auto;
}

关于父容器overflow:hidden的作用原理 #

给父容器添加overflow:hidden后，会触发块格式化上下文（BFC）。BFC的特性之一是约束内部元素的布局，防止子元素撑开父容器，所以父容器会严格遵守自身的max-width限制，把溢出部分隐藏。这种方法适合不需要滚动、仅需裁剪溢出内容的场景，但如果需要用户滚动查看全部内容，还是优先给目标容器配置overflow-x:auto和min-width:0。

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