SafariのCSSフレックスボックスアイテムの重複

Safariがデフォルトのフレックスコンテナ内でフレックスアイテムと重ならないようにする正しいCSSとは何ですか？SafariのCSSフレックスボックスアイテムの重複

Safariは、多くのコンテンツを持つアイテムに柔軟性を与えるにはあまりにも幅があるようです。

サファリ：する（Mac OS X 10.10.5ヨセミテのv8.0.8）

フレックスアイテムはChromeとFirefoxで罰金が表示されます。

クローム：

CSS：

main { 
    display: flex; 
    border: 3px solid silver; 
    } 
main >div { 
    background-color: plum; 
    margin: 10px; 
    }

HTML：

コード10

フィドル：

http://jsfiddle.net/LL05grus/6

この問題は修正されました。 ** macOS 10.12 Sierra **の** Safari 10.0 **でテストされています。 –

要素が縮小されます。縮小要素のプロパティを0に設定する必要があります。

main >div:first-child { 
    -webkit-flex: 0; 
    flex-shrink: 0; 
}

2015-09-21 12:27:45 Underfrog

本当に助かりました！しかし、私は自分の側で問題を解決するためにflex：0 0 autoと一緒に行かなければならなかった。 – Gabin

同じ問題があった場合、フレックスアイテムの1つでは、サファリモバイルに十分なスペースが得られませんでした。これは私のためにそれを解決するようです。ありがとう – Springrbua

'flex-shrink：0;'を要素に追加して、最小サイズより小さくすることもできます。 – Max

フレックスボックスの向きがiPadの列の重複した項目に変更された場合も同様の問題がありました。問題は、子要素に適用されたflex: 0 1 0;プロパティで発生しました。基本値autoを与えます。 flex: 0 1 auto;

.parent{ 
    display: flex; 
    flex-direction: column; 
} 
.parent .child{ 
    flex: 0 1 auto; 
}

2017-09-06 06:26:54 Lasithds

答えて