title: How to show a responsive image in Firefox with flexbox
body: <p>I can't figure it out, how to create an vertical aligned image in Firefox with flexbox.</p>
  
  <p>My Code works in Safari</p>
  
  <p>but not in Firefox:</p>
  
  <p><a href="http://i.stack.imgur.com/RtsbT.png" rel="nofollow">Firefox Screenshot</a></p>
  
  <p>The image overlaps keeps overlapping the parent div when schrinking the window.  </p>
  
  <p>Here is my css:</p>
  
  <pre><code>    .wrapper {
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
        border: 1px solid red;
        padding: 10px;
        }
  
        .flexbox {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid green;
        }
  
        .flex-child {
        border: 2px solid blue;
        }
  
        .flex-child img {
        max-width: 100%;
        max-height:100%;
        height: auto;
        }
  </code></pre>
  
  <p>And here the html:</p>
  
  <pre><code>    &lt;div class="wrapper"&gt;
        &lt;div class="flexbox"&gt;
          &lt;div class="flex-child"&gt;
            &lt;img src="http://dummyimage.com/800X600/000/fff"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And the link to <a href="https://jsfiddle.net/luxio/wL15mb0w/" rel="nofollow" title="JSFiddle">JSFiddle</a>.</p>