如何消除Flex布局下固定宽容器嵌套全屏元素的横向滚动条？

这个问题我之前也碰到过！原因很明确：Firefox里当页面出现垂直滚动条时，100vw的计算逻辑会让你的全屏元素"撑破"容器——100vw代表的是整个视口的宽度（包括滚动条占用的空间），但此时body的实际可用宽度是100vw减去滚动条的宽度，所以.wide-head设置width:100vw就会超出body的范围，触发横向滚动条。

给你两个实用的解决方案：

方案一：快速隐藏横向滚动条（治标） #

直接给body添加横向溢出隐藏，简单粗暴解决问题：

body {
  overflow-x: hidden;
}

这个方法适合不需要横向滚动的场景，缺点是如果后续有需要横向滚动的内容会被限制。

方案二：优雅实现全屏元素（治本） #

放弃100vw，改用负margin配合calc()来实现全屏宽度，完全避开滚动条的影响：
修改你的.wide-flex和.wide-head样式：

.wide-flex {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  /* 添加负边距拉满屏幕 */
  margin: 0 calc(-50vw + 50%);
  width: 100vw;
}

.wide-head {
  display: flex;
  background-color: grey;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  /* 继承父级的全屏宽度 */
  width: 100%;
}

原理是calc(-50vw + 50%)会自动计算出当前居中容器左右两侧的负边距，把.wide-flex直接拉到全屏宽度，.wide-head只需要占满父级宽度就好，这样不管有没有滚动条，都不会出现横向滚动的问题。

最后检查下你的HTML结构，多个.content重复的写法没问题，用这个方案后每个标题栏都会完美撑满屏幕~

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