为什么html元素的溢出设置比body元素更重要？

Question

主体或html的宽度大于屏幕的宽度时。主体的溢出设置不能覆盖html的溢出设置。

我正在尝试制作一个iframe来显示一些网页演示，例如jsfiddle的嵌入脚本。

在我的项目假设中，我需要固定iframe元素的大小，但是会有一个切换（4个按钮width [+] [-] length [+] [-]）来调整“虚拟屏幕”的大小iframe中的演示页面像这样：

通过测试，我发现使它唯一的方法是向内部演示页面注入一些代码，该页面的功能是“打开/关闭溢出-x溢出-y，并为其指定最小宽度和最小高度” “。

我不想让代码注入干扰（甚至影响）演示页面的正常功能。

但是测试的事实并不符合我的意愿，当我向内页中插入html{overflow:scroll}并具有body{overflow: hidde;width: 30000px;}之类的原始样式时，滚动条仍然显示。

我不知道为什么body的设置没有覆盖html的设置。还有另一种瞄准目标的方法吗？

<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>

html{
    overflow: scroll;
}
body{
    overflow: hidden;
    width: 30000px;
}

结果：