I'm dealing with a unique situation where I have a horizontal scrollable div containing different elements. To achieve the horizontal scroll, I've set the width: 100vh and rotated the div. However, this is causing an unwanted white space below the div. Do you have any suggestions on how to remove this space?
.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>