I am looking to create an outer div with horizontal scroll and inner div with vertical scroll where the inner div moves along with the outer div.
<body>
<div id="wrapper">
<div id="outer">content outer
<div id="inner">
<table>
<tr>
<td>column1</td>
<td>column2</td>
<td>column2</td>
<td>column2</td>
<td>column2</td>
</tr>
</table>
</div>
</div>
</div>
</body>
#wrapper {
position:relative;
height:200px;
width:200px;
}
#outer {
background-color: red;
overflow-x: auto;
overflow-y: hidden;
height:200px;
width:200px;
white-space: nowrap;
}
#inner {
color: white;
font-weight: bold;
margin-left: auto;
margin-right: auto;
height:150px;
background-color: blue;
white-space: nowrap;
position:relative; z-index:1;
}
By adding overflow-y: scroll; to the Inner Div, the horizontal scroll is limited to the Inner Div and does not affect the outer div.