Table horizontal scroll without modifying outer wrappers - html

Question

I have a table, and I'd like to add horizontal scroll on it.
However I cannot change the outer wrapper (.app) and the body values.
I've tried a couple of things like overflow-x: scroll; and white-space: nowrap; with no luck mostly I've ended with a scroll bar without scrolling...
I've made a codesandbox to experiment with... still no clue how should solve it with this "restrictions": https://codesandbox.io/s/keen-boyd-8cgw0w?file=/src/styles.css
body {
overflow: hidden;
}
.outer-wrap {
background-color: red;
width: 100vh;
height: 50vh;
}
/* Can't modifiy body, or the .outer-wrap */
.wrap {
background-color: green;
padding: 1rem;
/* can't modifiy this width! */
width: 100%;
overflow-x: scroll;
}
table {
overflow-x: scroll;
}
th,
tr,
td {
/* it just to make the table wide */
padding-left: 10rem;
}
And my html looks like this:
<div class="outer-wrap">
<div class="wrap">
<table>
<tbody>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

here is the front end of trust ready to answer, first of all do not use vh to define the width because you do not want that when you make the resize of the screen vertically containers are resized horizontally, almost always for heights are used fixed or automatic sizes, regarding your problem instead you should set overflow-x: auto to the red container and put as width for the green container width:fit-content.
I hope I was helpful