display: flex; doesn't work on iPad (both Chrome and Safari)

Question

This code works as expected on computer but totally fails to render the display: flex on both Chrome 47 for iPad and Safari for iPad (in landscape view, width 1024px).

It's strange because flex should be well supported on Chrome since a long time.

* { margin: 0; padding: 0; }
#header { height: 60px; display: -webkit-flex; display: flex; }
#topleft { flex: 0 0 155px; height: 100%; background-color: green; }
#topmid { flex: 0 0 40%; height: 100%; background-color: blue; }
#topright { flex: 1; background-color: yellow; }

<div id="header">
  <div id="topleft">Topleft</div>
  <div id="topmid">Topmid</div>
  <div id="topright">Topright</div>
</div>

What's wrong?

Answer 1

If your iPad isn't running iOS 9, you need to add -webkit-flex: 0 0 155px; to #topleft, -webkit-flex: 0 0 40%; to #topmid, and -webkit-flex: 1; to #topright.

Making an assumption based on your inclusion of display: -webkit-flex;

So, your new CSS might look like:

* { margin: 0; padding: 0; }
#header { height: 60px; display: -webkit-flex; display: flex; }
#topleft { -webkit-flex: 0 0 155px; flex: 0 0 155px; height: 100%; background-color: green; }
#topmid { -webkit-flex: 0 0 40%; flex: 0 0 40%; height: 100%; background-color: blue; }
#topright { -webkit-flex: 1; flex: 1; background-color: yellow; }

Also, Chrome on iPad is still using the Safari engine... it's just a webview, so we don't get all the up to date Chrome goodness we get on android devices.