title: IE overlapping flexbox when media sizing the page
body: <p>I am using the flexbox for displaying a variety of items where the layout will change based on the screen size in order to function on devices.  In Chrome, everything displays as expected, however IE is overlapping when going from the largest size to medium size screen.  I've managed to replicate this in jsfiddle.</p>
  
  <p>Fiddle:  <a href="https://jsfiddle.net/c7xmfyd3/5/" rel="nofollow noreferrer">https://jsfiddle.net/c7xmfyd3/5/</a></p>
  
  <pre class="lang-css prettyprint-override"><code>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; }
  
  /*Used to modify display as screen sizes change*/
  .flex-123, .flex, .flex-12, .flex-3, .flex-stack { display: flex; align-items: stretch; }
  .flex-3 { align-content:flex-start; }
  .flex-stack { flex-direction: column; }
  
  /*Media widths originally:  450, 650, 758, 900, 978px...converted to pt at 100px = 72pt */
  @media screen and (min-width: 72pt) {
      #canvasMap { width: inherit; }
      .flex-123 { flex-direction: column; }
      .flex-12 { flex-direction: column; }
      .flex-3 { flex-direction: column; }
  }
  
  /*@media screen and (min-width: 758px) {*/
  @media screen and (min-width: 432pt) {
      #canvasMap { width: 288pt; }
      .flex-123 { flex-direction: column; }
      .flex-12 { flex-direction: row; }
      .flex-3 { flex-direction: row; }
  }
  
  @media screen and (min-width: 710pt) {
      #suppliermetrics { min-width: 168pt; }
      .flex-123 { flex-direction: row; }
      .flex-12 { flex-direction: row; }
      .flex-3 { flex-direction: row;  }
  }
  </code></pre>
  
  <p>I've attempted a variety of flex settings as recommended in research, but no luck.</p>
  
  <p>Any feedback is appreciated.</p>