マルチラインフレックスボックスの子にmax-widthが与える影響は？

Question

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>

サファリ出力

クロム/ FireFoxの/オペラ出力

---

ブラウザ|バージョン
-------- | --------
Safari | 9.1（10601.5.17.4）
クロム| 51.0.2704.63（64ビット）
FireFox | 46.0.1
Opera | 37.0.2178.43

---

標準ドキュメントhttp://www.w3.org/TR/css-flexbox-1/は、横方向に複数行を除いて、フレックスボックスが最大幅の使用に光を投げていませんでした。

---

参考：問題は、これはSafariのバグですHow do I create a 3x3 grid via CSS?

Answer 1

上の議論から明るみに出ました。

Safariが実際にフレックスアイテムのサイズをレンダリングするための最小/最大幅/高さの宣言を使用しますが、多くの項目は、単一の行にする必要がありますどのように計算する際には、これらの値を無視します：

としてはflexbugs repositoryで説明しましたマルチラインフレックスコンテナの使用。代わりに、アイテムのフレックスベース値、またはフレックスベースがautoに設定されている場合はその幅を単に使用します。

最小/最大幅/高さの宣言は、働くことができるため、フレックス同等物を使用していることを私が発見した：

：

• Flex items not stacking properly in Safari

flexbugs文書はまた、ソリューションを提供しています

この問題を回避する唯一の方法は、flexベースを常にbetwになる値に設定することです最小サイズと最大サイズの宣言（包括的に）。最小または最大サイズ宣言のいずれかを使用する場合、最小値と最大サイズ宣言の両方を使用している場合は、その範囲のどこかの値にフレックス単位を設定します。これは、可能なすべてのシナリオをカバーするためにパーセント値またはメディアクエリを使用する必要があることがあります。

参考文献：

• Min and max size declarations are ignored when wrapping flex items
• Bug 136041 - Safari (WebKit) doesn't wrap element within flex when width comes below min-width