safari flexは、clearfix hackで動作しません。

Question

私は、float flexアイテムを含むflex containerにclearfix hackを追加しました。 Chrome（バージョン51.0.2704.84）とFirefox（バージョン47.0）では正常に動作しますが、Safari（バージョン9.1.1（11601.6.17））では動作しません。 3番目の項目は十分なスペースがあるだけでなく、2番目の行に移動します。私はそれがバグかどうか、それを回避する方法が不思議です。

* { 
 
    box-sizing: border-box; 
 
} 
 
#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 800px; 
 
    border: 1px solid #dcdcdc; 
 
} 
 
/* its me who make this magic */ 
 
#container:before { 
 
    content: " "; 
 
    display: table; 
 
} 
 
#container:after { 
 
    clear: both; 
 
} 
 
#container > div { 
 
    float: left; 
 
    width: 33.3333333%; 
 
    height: 100px; 
 
    padding: 0 15px; 
 
    background-color: #dcdcdc; 
 
    display: flex; 
 
    position: relative; 
 
}

<div id="container"> 
 
    <div>xxx</div> 
 
    <div>ooooo</div> 
 
    <div>nmn</div> 
 
    <div>sdfsdf</div> 
 
</div>

https://jsfiddle.net/3ghwm4ua/8/

Answer 1

あなたのclearfixコードは（そのことについては、やChromeまたはFirefox）Safariで動作しないはずです。

floatとclearプロパティは、フレックスコンテナに影響を与えません。それらは無視されます。仕様から

：

3. Flex Containers: the flex and inline-flex display values

フレックスコンテナはその 内容のための新しいフレックスフォーマッティングコンテキストを確立します。これは、ブロックレイアウトの代わりにフレックスレイアウトが使用されることを除いて、ブロックフォーマットコンテキスト を設定するのと同じです。例えば

、山車は、フレックスコンテナに侵入していない、とフレックス コンテナのマージンは、その内容の余白に崩壊しません。

フレックスコンテナはブロックコンテナではないため、 がブロックレイアウトを想定して設計した一部のプロパティは、フレックスレイアウトの コンテキストには適用されません。特に：

• floatとclear浮動またはフレックスアイテムのクリアランスを作成していない、と外の流れにそれを取ることはありません。