当宽度设置为100vh时，div下额外的空白(白色)空间

Question

我有一个水平可滚动的div，里面有不同的元素。我已经设置了width: 100vh，因为我已经为我的水平滚动旋转了div。问题是width: 100vh在div下造成额外的空白。你有什么办法可以把这个地方移走吗?

.wrapper {
height: 100vw;
width: 100vh;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
background: red;
}
.container {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
height: calc(100vh - 112px);
width: max-content;
overflow-y: hidden;
}
.children1 {
width: 500px;
height: 200px;
display: inline-block;
float: left;
background: green;
}
.children2 {
width: 500px;
height: 200px;
display: inline-block;
float: left;
background: yellow;
}

<div class="wrapper">
<div class="container">
<div class="children1"></div>
<div class="children2"></div>
</div>
</div>

Answer 1

你可以修改你的正文页边距，这应该是好的

body {
margin: 0;
}

Answer 2

.wrapper {
height: 100vh;
width: 100vw;
transform-origin: top left;
background: red;
}
.container {
transform-origin: top left;
height: calc(100vh - 112px);
width: max-content;
overflow-y: hidden;
}
.children1 {
width: 500px;
height: 200px;
display: inline-block;
float: left;
background: green;
}
.children2 {
width: 500px;
height: 200px;
display: inline-block;
float: left;
background: yellow;
}