Overflow-x scroll not working on iOS with flex

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!