JSFiddle - React, Tailwind, and code Playground
HTML
<div class="parent">
<div class="wrap">
<div class="child-big"></div>
<div class="child">
<p>qwqwqwqwqwqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwq</p> <p>qwqwqwqwqwqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwq</p> <p>qwqwqwqwqwqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwq</p> <p>qwqwqwqwqwqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwq</p> <p>qwqwqwqwqwqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwq</p> <p>qwqwqwqwqwqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwq</p> <p>qwqwqwqwqwqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwq</p> <p>qwqwqwqwqwqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwq</p> <p>qwqwqwqwqwqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwqqwqqwqwqwqwqwq</p>
</div>
</div>
</div>
CSS
html, body{
position: relative;
width: 100%;
height: 100%;
}
.parent{
overflow:scroll;
width: 100%;
height:100%;
background: green;
display:inline-block;
}
.child-big{
display: block;
float: left;
width: 200px;
height: 100px;
background: yellow;
}
.wrap {
overflow:hidden;
min-height:100%
}
.wrap >div {
margin-bottom: -99999px;
padding-bottom: 99999px;
min-height:100%;
}
.child{
display:block;
float:left;
background: blue;
width: 150px;
word-wrap:break-word;
}