Question

我注意到Chrome和Edge之间存在溢出行为的区别。

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

这有什么理由吗？如何使Edge的行为方式与Chrome相同？

谢谢！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

以下是我的想法：

当触发溢出时（因为el.value = Checker[item].url + ' ' + Checker[item].url; // To show both元素上的height: 200px高于父级的.content），会生成垂直滚动条。
此滚动条实际占用宽度。 max-height: 150px元素设置为.content。但是一旦生成滚动条，Chrome中的宽度就会增加到517px。请注意，滚动条的宽度因浏览器而异。
Chrome似乎会考虑或忽略垂直滚动条宽度。它避免启动水平滚动条。 Edge似乎将垂直滚动条宽度视为溢出，因此启动水平滚动条。
这种行为差异可能有多种原因，包括渲染元素和对象的不同顺序。

有一点很清楚，如果将width: 500px从width: 500px移到父级，则会解决水平滚动问题。

＆＃13;

.content

＆＃13;

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

＆＃13;

jsFiddle demo

Answer 2

试试这个：overflow-y: auto;

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

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之间的溢出差异

3 个答案: