title: Firefox does not scale images inside flexbox
body: <p>Edit: Here is a codepen and a screenshot showcasing the issue</p>
  
  <p><a href="https://codepen.io/mitsest/pen/qJaeaz" rel="nofollow noreferrer">Codepen</a></p>
  
  <p><a href="https://i.stack.imgur.com/YSBAL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YSBAL.png" alt="different rendering on browsers"></a></p>
  
  <p>I 'm trying to center align an image using flexbox, maintain its aspect ratio, and also have transparent background below it (check images below).
  I approached the problem by creating a full-height-width parent container, containing 4 rows (first is title, second is logo, third are social links, fourth is a chevron-down-icon)
  So parent container has flex-direction: row containing these 4.
  Inside the logo container I have a parent column container with flex-direction: column, containing 2 empty divs with flex: 1 and my app logo.</p>
  
  <h2>Mixins</h2>
  
  <pre><code>=full-height-width
    width: 100%
    height: 100%
  
  =fill($background-color: null)
    flex: 1
    display: flex
    height: 100%
  
  =flex-center-contents
    display: flex
    justify-content: center
    align-items: center
  
  // grid mixins
  =row($z-index: auto)
    display: flex
    flex-direction: column
    z-index: $z-index
    flex-wrap: nowrap
  
  =column($z-index: auto)
    display: flex
    flex-direction: row
    z-index: $z-index
    flex-wrap: nowrap
  </code></pre>
  
  <h2>Styles</h2>
  
  <pre><code>// Grid implementation
  .fill
    +fill($logo-background-color)
    z-index: $not-animated-background-z-index
  
  .parent-row-container
    +full-height-width()
    +row($not-animated-background-z-index)
  
  .parent-column-container
    +full-height-width()
    +column($not-animated-background-z-index)
  #parent-container
    +full-height-width()
    #social-container, #name-container, #logo-container
      flex: 1
  
    #social-container, #name-container
      background-color: $logo-background-color
      +flex-center-contents()
      z-index: $not-animated-background-z-index
  
    #name-container
      &gt; #name
        color: $home-primary-text-color
        font-family: $font-stack-sci-fi
        font-size: $name-font-size
  
        text-align: center
        user-select: none
  
    #logo-container
      display: flex
  
      &gt; #logo-img-wrapper
  
        &gt; #logo
          max-height: 100%
          max-width: 100%
          object-fit: contain
  
    #social-container
      display: flex
      flex-wrap: wrap
  
      &gt; .social-icon
        font-size: $social-icon-font-size
  
        min-width: 85px
        +media("&lt;=tablet")
          min-width: 45px
  
        text-align: center
  
  
    #bottom-arrow-container
      background-color: $logo-background-color
      padding-bottom: 1rem
      +flex-center-contents()
      z-index: $not-animated-background-z-index
  </code></pre>
  
  <h2>Html</h2>
  
  <pre><code>&lt;div class="parent-row-container"&gt;
    &lt;!-- Row --&gt;
    &lt;div class id="name-container"&gt;
      &lt;p id="name"&gt;
        Artist name
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;!-- End Row --&gt;
  
    &lt;!-- Row --&gt;
    &lt;div id="logo-container" class="parent-column-container"&gt;
      &lt;!-- Column --&gt;
      &lt;div class="fill"&gt;&lt;/div&gt;
      &lt;!-- Column --&gt;
      &lt;div id="logo-img-wrapper"&gt;
        &lt;img id="logo" src="@img/home/logo.png" /&gt;
      &lt;/div&gt;
      &lt;!-- Column --&gt;
      &lt;div class="fill"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End Row --&gt;
  
    &lt;!-- Row --&gt;
    &lt;div class="fill"&gt;
      &lt;!-- Column --&gt;
      &lt;div id="social-container"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="bottom-arrow-container"&gt;
      &lt;font-awesome-icon class="selectable" :icon="['fa', 'chevron-down']" :style="{ color: 'white'}" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This results in the following when run on Chromium/opera (expected)
  <a href="https://i.stack.imgur.com/kpujw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kpujw.png" alt="enter image description here"></a></p>
  
  <p>But firefox produces this
  <a href="https://i.stack.imgur.com/KiFTa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KiFTa.png" alt="enter image description here"></a></p>
  
  <p>Has this something to do with how firefox treats percentage widths?
  If i amend the img container and put flex: 1 on the image container firefox is fixed, but chromium/opera break, and they center the image (because of object-fit: contain) leaving spaces at the edges (also expected behavior) Also, if I remove completely the img from the html, the grid is the same as with chrome/opera</p>
  
  <p><a href="https://i.stack.imgur.com/08pph.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/08pph.png" alt="enter image description here"></a></p>
  
  <p>Have any of you experienced anything similar?</p>