Chrome和Edge的溢出区别答案

【问题标题】：Overflow difference between Chrome and EdgeChrome和Edge的溢出区别
【发布时间】：2018-11-01 00:42:25
【问题描述】：

我注意到 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>

【问题讨论】：

你试过 -ms-overflow-style developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style
@GuillaumeHarari 是的，但这对我没有帮助
原因：不同的浏览器（引擎）可以根据需要解释 html 和 css。在大多数情况下，它们确实会产生非常相似的结果，但不能保证。（IE因此/曾经臭名昭著）

标签： html css flexbox overflow

【解决方案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

【讨论】：

非常感谢。我认为原因是您在回答中所解释的，但老实说，我不想相信。无论如何，我无法设置父级的宽度，因为在实际情况下，我有一个没有固定大小的表格，而不是.content div，而.container3 有max-width: 100%。所以我的问题仍然在这里。

【解决方案2】：

试试这个：overflow-y: auto;

链接：https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

【讨论】：

我需要两个溢出...问题是在我的情况下只应该显示垂直的

【解决方案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>

希望对某人有所帮助。

【讨论】：