CSS overflow: auto in some elements don't work - html

Question

I have Ios mobile app and using WebKit Safari. I have an container with items. Container must swipe up/down. Elements inside container - left/right. The problem is, when i set overflow: auto; to both - and container and elements, when i swipe elements - they works. But if i want swipe the hole container (up/down), it don't. I need to swap elements and container too Please help!
<div id="container">
<div id="data-container">
<div class="left-right">
<div class="some-content"></div>
</div>
<div class="left-right">
<div class="some-content"></div>
</div>
<div class="left-right">
<div class="some-content"></div>
</div>
</div>
</div>
#container{
height: 100px;
width: 200px;
}
#data-container{
height: 500px;
width: 200px;
overflow-y: auto;
}
.left-right{
height: 50px;
width: 300px;
overflow-x: auto;
}

Answer 1

After a lot of testing I think I found a solution to what you mean.
Here the green elements move left and right, and the whole red container moves up and down.
#container {
background: blue;
height: 100px;
width: 200px;
overflow-x: hidden;
}
#data-container {
background: red;
height: 500px;
width: 200px;
white-space: nowrap;
overflow: auto;
}
.left-right {
background: green;
overflow-x: auto;
}
.some-content {
width: 300px;
height: 50px;
}
<div id="container">
<div id="data-container">
<div class="left-right">
<div class="some-content">LEFT-RIGHT A</div>
</div>
<div class="left-right">
<div class="some-content">LEFT-RIGHT B</div>
</div>
<div class="left-right">
<div class="some-content">LEFT-RIGHT C</div>
</div>
ONLY UP AND DOWN
</div>
</div>