What should be the effect of max-width on multiline flexbox's children?

Question

This is a compatibility issue between Safari and Chrome/FireFox/Opera.

.grid {
  display: flex;                   /* establish flex container */
  flex-wrap: wrap;                 /* enable flex items to wrap */
}
.cell {
  flex: 0 0 calc(33.33% - 10px);   /* don't grow, don't shrink, width less margin */
  height: 50px;
  max-width: 50px; /* works only in Safari */
  margin: 5px;
  background-color: #999;
}
.cell:nth-child(3n) {
  background-color: #F00;
}

<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Safari output

Chrome / FireFox / Opera output

Browser | Version
--------|--------
Safari | 9.1 (10601.5.17.4)
Chrome | 51.0.2704.63 (64-bit)
FireFox | 46.0.1
Opera | 37.0.2178.43

Standard doc http://www.w3.org/TR/css-flexbox-1/ didn't throw a light on use of max-width with multiline flex boxes except in the cross direction.

Reference: Issue came to light from discussion on How do I create a 3x3 grid via CSS?

score 1 · Answer 1 · edited May 23 '17 at 11:53

This is a bug in Safari.

As explained in the flexbugs repository:

Safari uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's flex-basis value, or its width if the flex basis is set to auto.

I have found that using flex equivalents for min/max width/height declarations can work:

Flex items not stacking properly in Safari

The flexbugs document also offers a solution:

The only way to avoid this issue is to make sure to set the flex basis to a value that is always going to be between (inclusively) the min and max size declarations. If using either a min or a max size declaration, set the flex basis to whatever that value is, if you're using both a min and a max size declaration, set the flex basis to a value that is somewhere in that range. This sometimes requires using percentage values or media queries to cover all possible scenarios.

References:

What should be the effect of max-width on multiline flexbox's children?

1 Answers1