为什么当溢出时垂直滚动条附加到 HTML:滚动分配给正文?

Question

如果你运行下面的代码，你会看到垂直滚动条附加到html而不是body，这是我所期望的。 我希望这是因为身体的高度定义为 800px，但div.a 的高度为 1500px。所以有了溢出：在正文上滚动，滚动条应该出现在正文上而不是html上。 谁能对此有所了解？

html {
background: black;
margin: 20px;
}
body {
background: red;
padding: 0;
margin: 0;
height: 800px;
overflow: scroll;
}
.a {
width: 500px;
height: 1500px;
background: yellow;
}
.b {
width: 500px;
height: 1000px;
background: blue;
}

<div class="a">
<div class="b">
</div>
</div>

Answer 1

我已经设法通过告诉 html 不显示溢出来让它工作。把负担交给孩子来处理。

* {
position: relative;
box-sizing: border-box;
}
html {
background: black;
margin: 20px;
overflow: hidden;
}
body {
width: 400px;
height: 100%;
max-height: 200px;
background: red;
padding: 20px;
margin: 0 auto;
overflow-y: scroll;
}
.a {
width: 300px;
height: 1500px;
padding: 20px;
margin: 0 auto;
background: yellow;
overflow-y: scroll;
}
.b {
width: 200px;
height: 3000px;
margin: 0 auto;
background: blue;
}

<div class="a">
<div class="b">
</div>
</div>