CODEWITHSUNDEEP
htmlcsssafariflexbox
Madara's Ghost
Madara's Ghost

Reputation: 174977

iPad Safari ignores margins when flex item gets too large

I have a few flex containers with 3 flex-items each. The first two flex-items have a margin-right, which spaces them from each other and from the third item. The first two items are always short (and constant width, in this case), and the third item has a variable width (can get long enough to wrap).

Here's an example (looks fine in Chrome, not so much on iPad)

li {
  display: flex;
  display: -webkit-flex;
}

.one, .two {
  margin-right: 10px;
}
<ul>
  <li>
    <span class="one">hey</span>
    <span class="two">ho</span>
    <span class="three">Lorem ipsum dolor sit amet.</span>
  </li>
  <li>
    <span class="one">hey</span>
    <span class="two">ho</span>
    <span class="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate molestias dolore in, nam neque facilis nulla eum beatae, excepturi fugiat.</span>
  </li>
  <li>
    <span class="one">hey</span>
    <span class="two">ho</span>
    <span class="three">Lorem ipsum dolor.</span>
  </li>
</ul>

This works well in nearly all browsers (I left out the -ms- prefixes because they're irrelevant to this issue), but in iPad's Safari (specifically, iPad Air 2 running Safari 8, maybe others), the margins get completely ignored when the third item is trying to grow larger, and the first two items get smooshed together.

Expected

Expected

Actual

Actual

This smells awfully like a bug in Safari, but I couldn't find any bug report or discussion about this online. It behaves as expected in pretty much every other browser. I've tried fiddling with pretty much all of the flex- properties, to no avail.

I'm looking first and foremost for a workaround, then also for an explanation on why this happens.

Upvotes: 4

Views: 651

Answers (1)

CoenFuze
CoenFuze

Reputation: 494

Add -webkit-flex: 1; to the .three class. This tells the parent container that this element is flexible. ;-)

Upvotes: 4

Related Questions