IE flex overlap

Using flex in IE is causing overlap when screen reduces in size.

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<body id="top">
    <form id="masterForm" runat="server">
           <div class="content">
            <h1>ACME Corporation - Supplier Landing Page</h1>
            <h3>
                <asp:Label runat="server" ID="lblSupplierName" />
            </h3>
            <asp:Label runat="server" ID="lblSupplierAddress" CssClass="newline" Visible="false" />
            Welcome to the ACME Supplier Portal. You are now able to see all the cool stuff!
        <br />
            <br />
            <div class="flex-123">
                <div class="flex-12">
                    <div class="flex-1">
                        <div class="flex-stack">
                            <div class="box">
                                <span class="title max-width">Supplier Info</span>
                                <div id="supplierinfo_content" class="content" runat="server"></div>
                            </div>
                            <div class="box">
                                <span class="title max-width">Supplier Location</span>
                                <div id="canvasMap"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-2">
                        <div id="suppliermetrics" class="box">
                            <span class="title max-width">Supplier Metrics</span>
                            <div id="mbOnTimeDelivery" class="metricbox mb-base" runat="server">
                                <div id="mbOnTimeDelivery_content" class="content" runat="server">N/A</div>
                                <div class="item">
                                    On time delivery
                                </div>
                            </div>
                            <div id="mbOnTimeShip" class="metricbox mb-good" runat="server">
                                <div...

CSS

span { display: inline-flex; }
.max-width { width: 100%; }

#canvasMap { height: 288pt; width: 288pt; margin: 0pt; padding: 0pt; }

.box { border: 0.75pt solid #aaaaaa; margin: 0pt 5pt 11pt 0pt; flex:auto; }
.box { -moz-border-radius-topright: 4pt; -moz-border-radius-topleft: 4pt; -webkit-border-top-right-radius: 4pt; -webkit-border-top-left-radius: 4pt; border-top-left-radius: 4pt; border-top-right-radius: 4pt; box-shadow: 0pt 2.2pt 4pt #aaaaaa; }
    .box .content { padding: 0pt 4pt 0pt 4pt; }
    .box .title { background: #0094ff; color: white; padding: 4pt; font-variant: small-caps; -moz-border-radius-topright: 4pt; -moz-border-radius-topleft: 4pt; -webkit-border-top-right-radius: 4pt; -webkit-border-top-left-radius: 4pt; border-top-left-radius: 4pt; border-top-right-radius: 4pt; }
    .box p { color: #333; padding: 7.2pt; }

.metricbox { border: 0.75pt solid; width: 72pt; height: 49pt; margin: 2pt; display: inline-block; position: relative; }
.metricbox { -moz-border-radius-topright: 4pt; -moz-border-radius-topleft: 4pt; -webkit-border-top-right-radius: 4pt; -webkit-border-top-left-radius: 4pt; border-top-left-radius: 4pt; border-top-right-radius: 4pt; -moz-border-radius-bottomright: 4pt; -moz-border-radius-bottomleft: 4pt; -webkit-border-bottom-right-radius: 4pt; -webkit-border-bottom-left-radius: 4pt; border-bottom-left-radius: 4pt; border-bottom-right-radius: 4pt; }
    .metricbox .content { text-align: center; font-weight: bold; font-size: 15pt; padding: 3pt; }
    .metricbox .item { font-size: 8pt; color: black; font-weight: bold; text-transform: uppercase; width: 100%; text-align: center; position: absolute; bottom: 0; }

.mb-base { border-color: black; color: black; }
.mb-good { border-color: #339933; color: #339933; }
.mb-bad { border-color: #ff0000; color: #ff0000; }
.mb-test { border-color: #e18412; color: #e18412; }

/*#canvasMap { height: 288pt; width: 288pt; margin: 0pt; padding: 0pt; }*/
#canvasMap { height: 288pt; width: inherit; margin: 0pt;...

JavaScript

var map;
            var geocoder;
            var bhpLatLng = new google.maps.LatLng(28.3575294, -81.5582714);
            var latitude;
            var longitude;

            function initMap() {
                geocoder = new google.maps.Geocoder();
                var latlng = bhpLatLng;
                var mapOptions = {
                    zoom: 15,
                    center: latlng
                }
                map = new google.maps.Map(document.getElementById('canvasMap'), mapOptions);
            }

            function showAddress(address) {
                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var latlng = results[0].geometry.location;
                        map.setCenter(latlng, 15);

                        var marker = new google.maps.Marker({
                            map: map,
                            position: latlng
                        });
                    }
                    else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });

            }