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

试试这个：overflow-y: auto;

Link : https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Answer 2

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

触发溢出时（因为.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

Answer 3

经过多次尝试，我找到了解决方法，即删除 align-items: flex-start 并将 display: flex 替换为 display: inline-flex。这是新代码：

.container1 {
  display: inline-flex;
  flex-flow: column;
}

.container2 {
  display: inline-flex;
  flex-flow: column;
}

.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>

希望对大家有所帮助。

Chrome 和 Edge 之间的溢出区别

Overflow difference between Chrome and Edge

html

css

overflow

flexbox