max-width 对多行 flexbox 的子级应该有什么影响？答案

【问题标题】：What should be the effect of max-width on multiline flexbox's children?max-width 对多行 flexbox 的子级应该有什么影响？
【发布时间】：2016-07-01 11:23:48
【问题描述】：

这是 Safari 和 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 输出

Chrome / FireFox / Opera 输出

浏览器 |版本
--------|--------
野生动物园 | 9.1 (10601.5.17.4)
铬 | 51.0.2704.63（64 位）
火狐 | 46.0.1
歌剧 | 37.0.2178.43

标准文档http://www.w3.org/TR/css-flexbox-1/ 没有说明在多行弹性盒子中使用 max-width，除了横向。

参考：在How do I create a 3x3 grid via CSS?的讨论中发现了问题

【问题讨论】：

标签： html css flexbox

【解决方案1】：

这是 Safari 中的一个错误。

如flexbugs repository中所述：

Safari 使用最小/最大宽度/高度声明来实际呈现弹性项目的大小，但在计算多行弹性容器的单行上应该有多少项目时，它会忽略这些值。相反，它只是使用项目的 flex-basis 值，或者如果 flex base 设置为 auto，则使用它的宽度。

我发现对最小/最大宽度/高度声明使用 flex 等效项可以工作：

Flex items not stacking properly in Safari

flexbugs 文档也提供了解决方案：

避免此问题的唯一方法是确保将 flex 基础设置为始终介于（包括）最小和最大尺寸声明之间的值。如果使用最小或最大尺寸声明，请将弹性基础设置为该值，如果您同时使用最小和最大尺寸声明，请将弹性基础设置为该范围内的某个值。这有时需要使用百分比值或媒体查询来涵盖所有可能的场景。

参考资料：

【讨论】：