Safari not computing height: 100% on nested flexbox
<p>I have an HTML structure with several list items laid out using flexbox, and within them are several elements which I'm laying out using a nested flexbox. </p>

<p>In Chrome, IE11, and Edge, the heights of all the list items are effectively matched thanks to Flexbox and <code>height: 100%</code>. The submit buttons ("add to basket") are therefore vertically aligned. </p>

<p>In Safari (desktop, ver 9.1.2) however, the <code>height: 100%</code> isn't applying (it probably isn't seeing a parent height value to base from). As such, the boxes aren't of equal height, and my elements are not aligned.</p>

<p>How can I modify the CSS to have Safari match Chrome's rendering behaviour?</p>

<p><a href="http://codepen.io/bbodien/pen/mAJKom?editors=1100" rel="nofollow"><strong>Codepen example</strong></a></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
li {
  padding: 0 10px;
  flex: 1 1 25%;
}
figure {
  margin: 0;
  background-color: rgba(255, 0, 0, 0.25);
  height: 100%; // this isn't working in safari
  display: flex;
  flex-direction: column;
  a {
    flex: 1;
    flex-shrink: 0;
  }
  img {
    display: block;
    width: 100%;
  }
}
figcaption {
  height: 100%; // this isn't working in safari
  flex: 1;
  display: flex;
  flex-direction: column;
}
.itemname {
  flex: 1;
  flex-grow: 1;
  margin-bottom: 10px;
}
.price {
  float: right;
  font-weight: bold;
}
form {} select {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
button[type='submit'] {
  display: block;
  width: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;

  &lt;li&gt;
    &lt;figure&gt;
      &lt;a href="#"&gt;
        &lt;img src="http://placehold.it/400" /&gt;
      &lt;/a&gt;
      &lt;figcaption&gt;
        &lt;div class="itemname"&gt;&lt;span class="price"&gt;$10&lt;/span&gt;Product&lt;/div&gt;
        &lt;form&gt;
          &lt;select&gt;
            &lt;option selected&gt;Please select&lt;/option&gt;
          &lt;/select&gt;
          &lt;button type="submit"&gt;Add to Basket&lt;/button&gt;
        &lt;/form&gt;
      &lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/li&gt;

  &lt;li&gt;
    &lt;figure&gt;
      &lt;a href="#"&gt;
        &lt;img src="http://placehold.it/400" /&gt;
      &lt;/a&gt;
      &lt;figcaption&gt;
        &lt;div class="itemname"&gt;&lt;span class="price"&gt;$10&lt;/span&gt;Product Two With A Much Longer Name That Could Wrap&lt;/div&gt;
        &lt;form&gt;
          &lt;select&gt;
            &lt;option selected&gt;Please select&lt;/option&gt;
          &lt;/select&gt;
          &lt;button type="submit"&gt;Add to Basket&lt;/button&gt;
        &lt;/form&gt;
      &lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/li&gt;

  &lt;li&gt;
    &lt;figure&gt;
      &lt;a href="#"&gt;
        &lt;img src="http://placehold.it/400" /&gt;
      &lt;/a&gt;
      &lt;figcaption&gt;
        &lt;div class="itemname"&gt;&lt;span class="price"&gt;$10&lt;/span&gt;Product Three No Select&lt;/div&gt;
        &lt;form&gt;
          &lt;button type="submit"&gt;Add to Basket&lt;/button&gt;
        &lt;/form&gt;
      &lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/li&gt;

  &lt;li&gt;
    &lt;figure&gt;
      &lt;a href="#"&gt;
        &lt;img src="http://placehold.it/400" /&gt;
      &lt;/a&gt;
      &lt;figcaption&gt;
        &lt;div class="itemname"&gt;&lt;span class="price"&gt;$10&lt;/span&gt;Product&lt;/div&gt;
        &lt;form&gt;
          &lt;select&gt;
            &lt;option selected&gt;Please select&lt;/option&gt;
          &lt;/select&gt;
          &lt;button type="submit"&gt;Add to Basket&lt;/button&gt;
        &lt;/form&gt;
      &lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>