Flexbox children don't have equal height on iPad

Question

I can't figure out why flexbox children do not have equal height on iPad (Chrome and Safari). When testing this works fine on the desktop:

But this is how it looks on iPad:

HTML structure:

<div class="flex-grid-quarters">
            <div class="tile col">
                <div class="tile-content border martlet">
                    <img src="/images/martlet.jpg"/>
                </div>
            </div>
            <div class="tile col quicklinks">
                <div class="tile-content border">
                    <h3>Quick Links</h3>
                    {module_menu, version="2", menuId="1958990", moduleTemplateGroup=""}
                </div>
            </div>
            <div class="tile col gold-links">
                <div class="tile-content border">
                    <a href="#" class="external-link">Mill Hill Enterprise</a>
                    <a href="#" class="external-link">Development Office</a>
                    <a href="#" class="external-link">Mill Hill School Foundation</a>
                    <a href="#" class="external-link">National Liberal Club</a>
                </div>
            </div>
            <div class="tile col contact-us">
                <div class="tile-content border">
                    <h3>Contact Us</h3>
                    <p>Old Millhillians Club</p>
                    <p>Mill Hill School</p>
                    <p>The Ridgeway</p>
                    <p>London NW7 1QS</p>
                    <br/>
                    <p>t 020 8906 7948 / 7949</p>
                    <p>e sk@millhill.org.uk</p>
                </div>
            </div>
        </div>

CSS:

.flex-grid-quarters, .flex-grid-thirds {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-grid-quarters .col {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 25%;
}

I don't believe it is necessary to have display: flex on the children, but I added that anyway in an attempt to get it working. No such luck (the result is exactly the same with or without that). The link to the site if anyone needs it is http://omclub.streeten.co.uk/ Any help much appreciated.

Your `.tile-content` elements have `height: 100%`. But there's no defined height on the parent element. Safari is therefore resolving to `height: auto` (content height). — Michael Benjamin, Sep 15 '16 at 13:56
Historically, it has been necessary to specify the `height` on containers if you want to use percentage heights on the children. But right now browsers seem to be in transition. Interpretation varies. [The duplicate has several solutions](http://stackoverflow.com/q/33636796/3597276). — Michael Benjamin, Sep 15 '16 at 14:04
Thanks so much - I used solution 4. Gave the .col divs display: flex, and removed the 100% height I'd set on the .tile-content. Working perfectly now. — Luke Twomey, Sep 15 '16 at 14:10

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

There's a ton of vendor prefixes that are no longer needed, so I removed everything but justify-content and display: flex; It looks like each flex-item has equal heights. Unfortunately I am not able to test it on an iPad (it's the only device I don't have yet)

SNIPPET

.flex-grid-quarters, .flex-grid-thirds {
    display: flex;
    justify-content: center;
}

.flex-grid-quarters .col {
    width: 25%;
    outline: 3px dashed red;
}

<!doctype html>
<html>
  
<head>
  <meta charset='utf-8'>
  
  </head>
<body>
<div class="flex-grid-quarters">
            <div class="tile col">
                <div class="tile-content border martlet">
                    <img src="/images/martlet.jpg"/>
                </div>
            </div>
            <div class="tile col quicklinks">
                <div class="tile-content border">
                    <h3>Quick Links</h3>
                    {module_menu, version="2", menuId="1958990", moduleTemplateGroup=""}
                </div>
            </div>
            <div class="tile col gold-links">
                <div class="tile-content border">
                    <a href="#" class="external-link">Mill Hill Enterprise</a>
                    <a href="#" class="external-link">Development Office</a>
                    <a href="#" class="external-link">Mill Hill School Foundation</a>
                    <a href="#" class="external-link">National Liberal Club</a>
                </div>
            </div>
            <div class="tile col contact-us">
                <div class="tile-content border">
                    <h3>Contact Us</h3>
                    <p>Old Millhillians Club</p>
                    <p>Mill Hill School</p>
                    <p>The Ridgeway</p>
                    <p>London NW7 1QS</p>
                    <br/>
                    <p>t 020 8906 7948 / 7949</p>
                    <p>e sk@millhill.org.uk</p>
                </div>
            </div>
        </div>
  </body>
</html>

Thanks, unfortunately that didn't work on iPad. In actual fact, the only reason those vendor prefixes are there is because I told Codekit to add them when it compiles. I switched the site back to use my .less file which only has the two rules you listed (display: flex and justify-content) but no luck. — Luke Twomey, Sep 15 '16 at 11:38
I did a quick scan of search results and it looks like iPads have a ton of issues with flexbox. I suggest a JS/jQ solution as a fallback.BTW, your `` is ok. — zer00ne, Sep 15 '16 at 13:03

Flexbox children don't have equal height on iPad

1 Answers1

SNIPPET