Overflow-x scroll not working on iOS with flex - css

Question

I already have everything working on the desktop but now I just can't figure out why overflow-x won't work on iOs. I already tried to set the min-width to 0 of all children and also to work it out with table instead of flex.
In the end, it should be a horizontal scroll in the image-container div, that is showing all the images on x-scroll.
As already mentioned, it runs anywhere accept on the iPhone safari browser.
Here is the code so far:
sass:
#main-container {
#image-container {
height: 466px;
width: 95.47vw;
display: flex;
overflow: auto;
-webkit-overflow-scrolling: touch;
#images {
padding-top: 41px;
left: 0;
height: 466px;
width: 1399.8px;
display: flex;
align-items: flex-start;
justify-content: space-between;
border-spacing: 0;
.bodytext {
width: 296.46px;
}
.image {
padding-bottom: 0;
padding-right: 17.5px;
align-self: flex-end;
&:last-child {
padding-right: none;
}
img {
opacity: 100%;
width: 296.46px;
height: auto;
cursor: pointer;
}
img:hover {
opacity: 50%;
}
}
}
}
html:
<div id="main-container">
<div id="image-container">
<div id="images">
<div class="image" id="0-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
<div class="image" id="1-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
<div class="image" id="2-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
<div class="image" id="3-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
</div>
</div>
Thanks a lot!