jQuery reponsive dialog box

dynamicly resizing responsive dialog box with jquery. uses flexbox

HTML

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<div id="foo">
    you<br />
    will<br />
    see<br />
    that<br />
    the<br />
    contents<br />
    span<br /><br />
    you<br />
    will<br />
    see<br />
    that<br />
    the<br />
    contents<br />
    span<br />
</div>

CSS

body { font-size:12px; }

.ui-dialog {
    z-index:1000000000;
    top: 0; left: 0;
    margin: auto;
    position: fixed;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.ui-dialog .ui-dialog-content {
    flex: 1;
}
.ui-dialog .ui-dialog-buttonpane {
    background:white;
}

JavaScript

$('#foo').dialog({
		width: "400",
    height: "400",
    buttons: {
        ok: function(){}
    }
});