title: flexbox overflowing container in firefox
body: <p>I'm working on a flexbox layout and I have an issue where the flex items will overflow the container in firefox only. Here's as stripped down an example as I could come up with (sorry it's not super minimal, I'm unsure what's causing the issue, so it's hard to know what I can remove):</p>
  
  <pre><code>&lt;div class="css-190tu11"&gt;
    &lt;h1 class="css-1qqir8k"&gt;Blah&lt;/h1&gt;
    &lt;div class="css-131b9cy"&gt;
      &lt;div class="css-1suni8j"&gt;
        &lt;a class="css-yq2t95" href="some-url"&gt;
          &lt;span class="icon icon-register css-nwymqb" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;h2 class="css-1892n22"&gt;Title&lt;/h2&gt;
          &lt;div class="css-kgza95"&gt;Description&lt;/div&gt;
        &lt;/a&gt;
        &lt;div class="css-kujdaf"&gt;
          Some special thing
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="css-1suni8j"&gt;
        &lt;a class="css-yq2t95" href="some-url"&gt;
          &lt;span class="icon icon-register css-nwymqb" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;h2 class="css-1892n22"&gt;Title&lt;/h2&gt;
          &lt;div class="css-kgza95"&gt;Description&lt;/div&gt;
        &lt;/a&gt;
        &lt;div class="css-dkez8"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="css-1suni8j"&gt;
        &lt;a class="css-yq2t95" href="some-url"&gt;
          &lt;span class="icon icon-register css-nwymqb" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;h2 class="css-1892n22"&gt;Title&lt;/h2&gt;
          &lt;div class="css-kgza95"&gt;Description&lt;/div&gt;
        &lt;/a&gt;
        &lt;div class="css-dkez8"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="css-1suni8j"&gt;
        &lt;a class="css-yq2t95" href="some-url"&gt;
          &lt;span class="icon icon-register css-nwymqb" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;h2 class="css-1892n22"&gt;Title&lt;/h2&gt;
          &lt;div class="css-kgza95"&gt;Description&lt;/div&gt;
        &lt;/a&gt;
        &lt;div class="css-dkez8"&gt;&lt;/div
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.css-190tu11,
  [data-css-190tu11] {
    padding: 12px 48px 24px 48px;
    border: solid 1px #e0e0e0;
  }
  .css-1qqir8k,
  [data-css-1qqir8k] {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 18px;
    margin-top: 0;
  }
  .css-131b9cy,
  [data-css-131b9cy] {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .css-131b9cy &gt; *,
  [data-css-131b9cy] &gt; * {
    flex: 0 1 auto;
    margin-left: 0;
    margin-right: 0;
  }
  .css-131b9cy &gt; *:not(:first-child),
  [data-css-131b9cy] &gt; *:not(:first-child) {
    margin-left: 10px;
  }
  .css-131b9cy &gt; *:not(:last-child),
  [data-css-131b9cy] &gt; *:not(:last-child) {
    margin-right: 10px;
  }
  
  .css-1suni8j,
  [data-css-1suni8j] {
    display: flex;
    background-color: white;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    max-width: 186px;
    min-width: 120px;
    height: 240px;
  }
  .css-1suni8j &gt; *,
  [data-css-1suni8j] &gt; * {
    margin-top: 0;
    margin-bottom: 0;
  }
  .css-1suni8j &gt; *:not(:first-child),
  [data-css-1suni8j] &gt; *:not(:first-child) {
    margin-top: 10px;
  }
  .css-1suni8j &gt; *:not(:last-child),
  [data-css-1suni8j] &gt; *:not(:last-child) {
    margin-bottom: 10px;
  }
  
  .css-yq2t95,
  [data-css-yq2t95] {
    flex: 1;
    justify-content: space-between;
    flex-direction: column;
    display: flex;
  }
  .css-yq2t95 &gt; *:last-child,
  [data-css-yq2t95] &gt; *:last-child {
    flex: 0 1 auto;
  }
  .css-yq2t95 &gt; *,
  [data-css-yq2t95] &gt; * {
    margin-top: 0;
    margin-bottom: 0;
  }
  .css-yq2t95 &gt; *:not(:first-child),
  [data-css-yq2t95] &gt; *:not(:first-child) {
    margin-top: 5px;
  }
  .css-yq2t95 &gt; *:not(:last-child),
  [data-css-yq2t95] &gt; *:not(:last-child) {
    margin-bottom: 5px;
  }
  
  .css-nwymqb,
  [data-css-nwymqb] {
    transition: all 0.5s ease;
    border-radius: 50%;
    display: block;
    margin-left: auto;
    border: 1px solid #0070ba;
    height: 60px;
    width: 60px;
    font-size: 30px;
    line-height: 54px;
    margin-right: auto;
  }
  
  .css-1892n22,
  [data-css-1892n22] {
    font-weight: normal;
    flex: 0 1 auto;
    color: inherit;
    padding: 0;
    font-size: 16px;
    height: 80px;
  }
  .css-kgza95,
  [data-css-kgza95] {
    font-weight: normal;
    font-size: 11px;
    color: #333333;
    height: 76px;
  }
  .css-kujdaf,
  [data-css-kujdaf] {
    min-height: 36px;
    background-image: linear-gradient(93deg, #1446a0, #0070ba);
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
  .css-dkez8,
  [data-css-dkez8] {
    min-height: 36px;
  }
  </code></pre>
  
  <p>Here's what it looks like in Chrome and Safari (this is what I want it to look like):</p>
  
  <p><a href="https://i.stack.imgur.com/Vc40p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vc40p.png" alt="Chrome and Safari"></a></p>
  
  <p>And here's what it looks like in Firefox:</p>
  
  <p><a href="https://i.stack.imgur.com/oHgAL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oHgAL.png" alt="Firefox"></a></p>
  
  <p>Even Internet Explorer 10 shows it the way I want! (Can't verify in the codepen because I removed vendor prefixes, but it works in my app).</p>
  
  <p>Here's <a href="https://codepen.io/kentcdodds/pen/XModxZ" rel="nofollow noreferrer">a codepen</a> for this.</p>
  
  <p>Thanks for any help!</p>