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;

＆＃13;

＆＃13;

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

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;