html - 消除操作系统/浏览器添加的滚动空间

Question

在下面的代码中，我只想看到蓝色阴影。

我知道添加的空白是在任何一个的控制之下操作系统或浏览器。不过，必须有办法摆脱它，在至少对于左边的 div，那里没有溢出，但理想情况下，左右 DIV 都适用。

function loremipsum(divclass, number, what) {
    var lorem = document.getElementsByClassName(divclass);
    for(i=0; i<number; i++)
        lorem[0].innerHTML += what;
}
loremipsum("one", 20, "left ");
loremipsum("two", 2000, "right ");

body {
    height: 100vh;
    margin: 0;
    display: flex;
}
.wrapper{
    display: flex;
    flex-grow: 1;
}
.holder {
    flex-grow: 1;
    display: grid;

    grid-template-rows: 1fr;
    grid-template-columns: 2fr 3fr;
    grid-template-areas:"one two";
    background-color: #154360;
}
.box {
    padding: 10px; margin: 10px;
    border: 10px solid #2E86C1;
    background-color: #AED6F1;
    overflow-y: scroll;
    color: #154360;
}
.one  { grid-area: one;  }
.two { grid-area: two; }

<div class="wrapper">
    <div class="holder">
        <div class="box one"></div>
        <div class="box two"></div>
    </div>
</div>

Answer 1

添加到 .one 或 .box overflow-y: hidden; 。现在你根本无法滚动。不知道是否需要。