使用align-items:flex-start时Firefox滚动条压缩flex子元素问题

这不是浏览器Bug，是Chrome和Firefox在Flex布局下对元素宽度计算的处理差异导致的。

在你的代码中，.parent是垂直方向的Flex容器，align-items: flex-start让子元素宽度由内容决定。当.inner出现垂直滚动条时，Firefox没有自动调整.inner的宽度来容纳滚动条，导致内部300px宽的.line加上滚动条后超出容器，出现水平滚动；而Chrome会自动调整宽度，把滚动条纳入计算。

可行的解决办法 #

方法1：给.inner设置宽度为100%

让.inner继承父容器的宽度（父容器宽度由第一个.line的300px确定），滚动条会被包含在这个宽度内：

.line {
  width: 300px;
  border: 1px solid red;
}
.parent {
  display: flex;
  flex-direction: column;
  height: 150px;
  align-items: flex-start;
}
.inner {
  flex-basis: 0;
  flex-grow: 1;
  overflow-y: auto;
  width: 100%; /* 添加这一行 */
}

方法2：给.inner设置min-width: 0

Flex布局中默认min-width: auto，元素会优先保证内容宽度，设置min-width: 0后允许元素收缩以容纳滚动条：

.line {
  width: 300px;
  border: 1px solid red;
}
.parent {
  display: flex;
  flex-direction: column;
  height: 150px;
  align-items: flex-start;
}
.inner {
  flex-basis: 0;
  flex-grow: 1;
  overflow-y: auto;
  min-width: 0; /* 添加这一行 */
}

两种方法都能解决Firefox中的水平滚动条问题，同时保持Chrome中的正常表现。

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