Chrome：添加动态内容时出现奇怪的滚动条行为

Question

27.04.2018 更新： 似乎这已在 Chrome v66 中得到解决。我无法再在此版本上重现此问题。

--

在我的 Web 应用程序中，我有自定义上下文菜单，可以异步加载内容。这些菜单是大小有限的 flex div，任何不适合的东西都应该强制滚动条显示在容器上（类似于下面的实现示例）。问题是滚动条出现在容器之外，除非（我猜）我通过调整 chrome 窗口大小或更改 css 属性来强制重新绘制网站。

let container = document.getElementsByClassName("list").item(0);

setTimeout(() => {
  for(let i = 0; i < 10; i++) {
    container.insertAdjacentHTML("beforeend", "<div>TEST</div>");
  }
}, 0);

* {
  box-sizing: border-box;
}

.overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: lightgray
}

.surface {
    background-color: green;
    color: #343434;
    position: absolute;

    max-width: 50vw;
    max-height: 50vh;
    
    padding: 10px;
}

.flex {
  display: flex;
  align-items: stretch;
}

.flex > * {
  flex: 0 0 auto;
}

.fill {
  flex: 1 1 auto;
}

.auto {
  overflow: auto;
}

.vertical {
  flex-direction: column;
}

.list {
  background: red;
}

.list.vertical > * {
  margin-bottom: 3mm;
  margin-top: 0;
}

<div class="overlay">
  <div class="surface flex" style="left: 50%; top: 10%;">
    <div class="fill flex vertical spaced">
      <u>Text</u>
      <div class="fill flex vertical auto list">
        
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/wuj18nh4/2/

加载后，您应该注意到滚动条位于绿色容器之外。如果你强制重绘，绿色容器的宽度会变大并包含滚动条。

我的问题是：这是一个错误还是损坏的 css 组合，我应该如何在不重写整个结构的情况下修复它？

请注意，它可以在 Edge 和最新的 Firefox 上正常运行。

Answer 1

你唯一需要做的改变是你必须给padding: 25px;而不是padding: 10px;

let container = document.getElementsByClassName("list").item(0);

setTimeout(() => {
  for(let i = 0; i < 10; i++) {
    container.insertAdjacentHTML("beforeend", "<div>TEST</div>");
  }
}, 0);

* {
  box-sizing: border-box;
}

.overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: lightgray
}

.surface {
    background-color: green;
    color: #343434;
    position: absolute;

    max-width: 50vh;
    max-height: 50vh;
    
    padding: 25px;
}

.flex {
  display: flex;
  align-items: stretch;
}

.flex > * {
  flex: 0 0 auto;
}

.fill {
  flex: 1 1 auto;
}

.auto {
  overflow: auto;
}

.vertical {
  flex-direction: column;
}

.list {
  background: red;
}

.list.vertical > * {
  margin-bottom: 3mm;
  margin-top: 0;
}

<div class="overlay">
  <div class="surface flex" style="left: 50%; top: 10%;">
    <div class="fill flex vertical spaced">
      <u>Text</u>
      <div class="fill flex vertical auto list">
        
      </div>
    </div>
  </div>
</div>