CSS Iframe problems with width and scroll

I have some problems in IOS devices with an iframe inside a modal. The modal should be (only in mobile devices) fullscreen and also the iframe. This last should to be scrollable in y axis but not in x. The content of iframe is rendered by javascript by a data-attribute. If I removed the width: 0 on iframe, the scroll works but the iframe isn't responsive. Instead, if I insert width: 0 the iframe is responsive but the scroll bar not showing

<!-- Modal Editorial -->
<div class="modal modal-iframe" id="modal-editorial">
    <span class="close cursor">&times;</span>
    <div class="row">
        <div class="ten offset-by-one columns">

            <div class="modal-content">
                <iframe src="javascript:void(0)" frameborder="0"></iframe>
            </div>

        </div>
    </div>

</div>
<!-- /Modal Editorial -->

<style>
.modal-iframe .modal-content iframe {
    width: 100%;
    height: 100vh;
    background-color: #fff;
}

@media screen and (max-width: 450px) {
    .modal-iframe {
        padding-top: 0;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .modal-iframe .modal-content {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .modal-iframe .modal-content iframe {
        width: 0px;
        height: 0px;
        max-height: 100vh;
        max-width: 100vw;
        min-height: 100vh;
        min-width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
    }
}
</style>