JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
needs to be min-heigth 100%
<div id="sidebar">
needs to be 40px width
</div>
<div id="subsidebar">
needs to be 200px width
</div>
<div id="content">
needs to be 100% width
<div class="some-element-is-3000">
3000px height(example)<br/>sg<br/><br/>sg<br/><br/>sg<br/><br/>sg<br/><br/>sg<br/><br/>sg<br/>
<br/>sg<br/><br/>sg<br/><br/>sg<br/><br/>sg<br/><br/>sg<br/><br/>sg<br/>
<br/>sg<br/><br/>sg<br/><br/>sg<br/><br/>sg<br/><br/>sg<br/><br/>sg<br/>
</div>
</div>
</div>
CSS
html,body,#container{
width:100%;
height:100%;
}
#container{
display:table;
}
#sidebar,#subsidebar,#content{
border:1px solid black;
display:table-cell;
}
#sidebar{
min-width:40px;
}
#subsidebar{
min-width:200px;
}
#content{
width:100%;
}