在下面的代码中，我只想看到蓝色阴影。
我了解所添加的空白在任何一个的控制之下 操作系统或浏览器。尽管如此，仍然必须有一种方法来摆脱它， 至少对于左侧的div（没有溢出）而言， 但是理想的情况是同时使用左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>