html - Windows 10 上 Chrome 76 中不必要的滚动条

Question

   <div style="overflow-x: hidden">
      <div style="height: 100%">
        <p style="margin-bottom: 1rem">
          asdf dasfd asdf asdfsdf dasfd asdf asdfsdf dasfd asdf asdfsdf dasfd asdf asdfsdf dasfd asdf asdfsdf dasfd asdf asdf
        </p>
      </div>
    </div>

https://jsfiddle.net/x6kmf507/1/

此代码仅在 Windows 10 和 Chrome 76 中显示额外的 scollbar。为什么？以及如何修复它？

Answer 1

如果您从第二个 div 中删除 height: 100%;，它将删除滚动条。

我认为嵌套 div 是有原因的。您能否提供更多背景信息来说明为什么要按照现在的方式格式化 html？