JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainWin">
	<div class="container">
		<table class="innerTable">
			<tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr>
		</table>
	</div>
	<hr>
	<div class="container">
		<div class="innerContent">	test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
		</div>
	</div>
</div>

CSS

#mainWin {
	overflow: hidden;
}

.container {
	width: 100%;
	padding-right: 40px;
	box-sizing: content-box;
	overflow: auto;
}

.innerContent, .innerTable {
	width: 100%;
}

/* ################################################################ */
/* DO NOT REMOVE */
/* FIXED PROPERTIES */
#mainWin {
	/* Simulate a calculated width (in %) */
	width: 400px;
}
.container {
	/* Arbitrary height of the scroll zone */
	height: 200px;
}
/* DEBUG ¨PROPERTIES */
#mainWin {border: 1px solid #000;}
.container {background: #A55;border: 1px solid #5A5;}
.innerContent, .innerTable {background: #55A;border: 1px solid #D4E200;}
/* END DO NOT REMOVE */
/* ################################################################ */