Safari not computing height: 100% on nested flexbox

Question

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.

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

In Safari (desktop, ver 9.1.2) however, the height: 100% 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.

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

Codepen example

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%;
}

<ul>

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

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

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

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

possible duplicate: [Chrome / Safari not filling 100% height of flex parent](http://stackoverflow.com/q/33636796/3597276) — Michael Benjamin, Sep 08 '16 at 12:22
http://stackoverflow.com/questions/31421364/nested-flexbox-100-height-not-working-in-safari?rq=1 — Paulie_D, Sep 08 '16 at 12:23
@Michael_B I looked through both that question and the one Paulie_D mentioned, and the answers first, but having tried the solutions against my code snippet, I couldn't find a fix using the absolute positioned wrapper, and I can't specify fixed height values (plus Chrome is behaving fine so it's not a generic Webkit issue). — bbodien, Sep 08 '16 at 12:29
I'm on mobile, so can't get into your question directly. But here's one more reference. http://stackoverflow.com/a/35137869/3597276 — Michael Benjamin, Sep 08 '16 at 12:39
@Michael_B there might be something in the Safari issue with every ancestor element needing a height: 100% specified, but I'm not sure. I thought I could deal with this using flexbox to equalise the heights of the elements as a contained component, without worrying about parent heights beyond that. — bbodien, Sep 08 '16 at 12:59

score 2 · Accepted Answer · answered Sep 09 '16 at 17:27

2

I've worked around the problem by reducing the amount of markup between the things I'm aligning within the structure, and the outer container -

Basically eliminating the figure and figcaption so that the elements needing to be vertically aligned are siblings, and there are no wrappers in between to confuse Flexbox's height matching calculation.

Working code demo

answered Sep 09 '16 at 17:27

bbodien

1,062
2
10
20

You are a lifesaver! – Pouya Jabbarisani Feb 02 '21 at 14:45

score 1 · Answer 2 · answered Sep 08 '16 at 13:38

1

With some edits this is working fine now on Safari 9.

http://codepen.io/paulcredmond/pen/dpoqzQ

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

li {
  padding: 0 10px;
  display: flex;
  align-items: stretch;
  flex-direction: row; 
}

answered Sep 08 '16 at 13:38

Paul Redmond

3,276
4
32
52

That's promising with the equal heights of the containers, but you've lost the vertical alignment of the contained elements - the add to basket buttons all need to be in vertical alignment. When I try reincorporating that then it all breaks again. – bbodien Sep 08 '16 at 14:01
@bbodien Why don't you simply set your `figcaption` height to some static height in px and then position everything inside accordingly? If item name has 10 lines you will show them all? Can't you clip it after some max lines? – JoannaFalkowska Sep 08 '16 at 14:54
@Senthe I really need things to stay fluid to accommodate internationalisation, bulletproofing and so on. (worst case I can just do this with some large value that I hope will never be breached, but it's a last resort) – bbodien Sep 08 '16 at 15:00

Safari not computing height: 100% on nested flexbox

2 Answers2