html - Chrome 和 Edge 之间的溢出差异

Question

我注意到 Chrome 和 Edge 在溢出行为方面存在差异。

正如您在运行以下代码时看到的，在 Chrome 中这仅显示垂直滚动条(在我看来是正确的)，而在 Edge 中则有两个滚动条。

这是有原因的吗？如何让 Edge 的行为方式与 Chrome 的行为方式相同？

谢谢!

.container1 {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

.container2 {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

.container3 {
  max-height: 150px;
  overflow: auto;
}

.content {
  width: 500px;
  height: 200px;
  background-color: blue;
}

<div class="container1">
  <div class="container2">
    <div class="container3">
      <div class="content"></div>
    </div>
  </div>
</div>

Answer 1

这是我认为正在发生的事情:

• 当触发溢出时(因为 .content 元素上的 height: 200px 高于 max-height: 150px 在父级上)，生成垂直滚动条。

• 这个滚动条实际上​​占据了宽度。 .content 元素设置为 width: 500px。但是一旦生成滚动条，Chrome 中的宽度就会增加到 517px。请注意，滚动条宽度因浏览器而异。

• Chrome 似乎会考虑或忽略垂直滚动条的宽度。它避免启动水平滚动条。 Edge 似乎将垂直滚动条宽度视为溢出，因此启动水平滚动条。

• 造成这种行为差异的原因有很多，包括呈现元素和对象的不同顺序。

有一件事很清楚，如果将 width: 500px 从 .content 移动到父级，水平滚动问题就解决了。

.container1 {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

.container2 {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

.container3 {
  max-height: 150px;
  overflow: auto;
  width: 500px; /* new */
}

.content {
  /* width: 500px; */
  height: 200px;
  background-color: blue;
}

<div class="container1">
  <div class="container2">
    <div class="container3">
      <div class="content"></div>
    </div>
  </div>
</div>

jsFiddle demo