Flexbox issues in Safari 10.0.1
<p>I have <a href="http://jsbin.com/xaguha/19/edit?html,css,output" rel="nofollow noreferrer">some code set up over at jsBin</a> to test out flexbox, and it works fine in evey browser I threw at it (including IE11), but in Safari 10.0.1, the <code>.img</code> element doesn't get stretched to the height of its parent element. Any ideas?</p>

<p>The HTML:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;style&gt;
    body {
      font-family: Arial, sans-serif;
      background: #f7f7f7;
    }

    h1 {
      padding-left: 20px;
    }

    .text {
      font-size: 12px;
      font-family: serif;
      text-align: center;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="wrapper"&gt;
      &lt;div class="article"&gt;
        &lt;div class="figure"&gt;
          &lt;div class="img"&gt;
             &lt;img src="http://json.tv/images/general/2014/09/08/thumbnail-20140908100224-3296.jpg" /&gt;
          &lt;/div&gt;  
        &lt;/div&gt;

        &lt;div class="text"&gt;
          &lt;span class="cat"&gt;Lifestyle&lt;/span&gt;
          &lt;h1&gt;
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
          &lt;/h1&gt;
          &lt;span class="date"&gt;6. 6. 1966&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The CSS:</p>

<pre><code>img {
  position:  absolute;
  height:    100%;
  left:      50%;
  transform: translateX(-50%);
}

.img {
  position: relative;
  height: 100%;
}

.figure, .text {
  width:    50%;
  overflow: hidden;
  float:    left;
}

.article {
  display:    flex;
  min-height: 280px;
  max-width:  690px;

  background: white;
}
</code></pre>