responsive table-cell div with tall image

HTML

<script src="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<a class="popup-with-zoom-anim" href="#small-dialog">Open</a>

<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
    <div class="image_container">
            <img src="http://static.adzerk.net/Advertisers/db5df4870e4e4b6cbf42727fd434701a.jpg" />
    </div>
    <div class="content">
        <div class="content1">1</div>
        <div class="content2">2</div>
    </div>
    <div style="clear: both;"></div>
</div>

CSS

.image_container, .content {
    display: table-cell;
    background: #3D6AA2;
    vertical-align: middle;
    width: 100%;
}
.image_container img {
    max-width: 100%;
}
.image_container {
    text-align: center;
}
.content1, .content2 {
    background: white;
    padding: 1em;
}
.content2 {
    height: 300px;
    overflow-y: scroll;
}
@media (min-width: 1px) and (max-width: 638px) {
    .image_container, .content {
        width: 100%;
        display: block;
    }
}
#small-dialog {
    max-width: 850px;
    margin: 20px auto;
    background-color: #1C1C1C;
    padding: 0;
    line-height: 0;
    border: 1px solid red;
    display: table;
    table-layout: fixed;
}

JavaScript

$(document).ready(function () {
    $('.popup-with-zoom-anim').magnificPopup({
        type: 'inline',

        fixedContentPos: false,
        fixedBgPos: true,

        overflowY: 'auto',

        closeBtnInside: true,
        preloader: false,

        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-zoom-in'
    });
});