パーセンテージ幅は私のflexboxコンテナSafariの子要素はそれらを無視するか、少なくともそれらをわずかに異なるようにレンダリングするようです。これは、3つの項目が並んでいる場合、2つのみが表示されることを意味します。
これが問題を表示しているCodePenです。 http://codepen.io/moy/pen/BWLKbo
ご覧のとおり、デスクトップでは各リスト項目の幅は33.33333％になります。これは最初の行では発生しませんか？自動プレフィックスを使用して私のプレフィックスが追加されていることに注目する価値があります。
あなたが削除するとすぐに display: flex から .mosaic リスト項目は行に並んでいます。そのため、Flexboxが原因となっています。すべてのリスト項目が同じ高さになるようにする必要があります。
私は使ってみた flex: 1 0 auto; これは別の投稿で言及されていますが、それはこの状況ではうまくいかないようです。私はflexboxをあまり使っていないので、私の知識は非常に基本的です。
誰かがこれを手伝ってくれることを願っています！ :)
回答：
回答№1は1これは、レイアウトエンジンにおけるある種の丸め誤差のようです。 モバイルサファリでは少なくとも幅をに変更することで動作するようにすることができます 33% そうではない 33.33333%。 それがページ上の他のデザインの邪魔にならない場合は、それが解決策となる可能性があります。
回答№2の場合は1
疑似要素が "solid"としてレンダリングされているか、何らかの形式のコンテンツを持っているために：before /：afterが原因で問題が発生しているようです。だから設定 width: 0; または content: normal; この問題を解決するようだ。
コンテナではCSS（scss）は次のようになります。
.mosaic {
@include clearfix;
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0 0 $vertical-spacing;
padding-left: 0;
width: 100%;
&:before,
&:after {
content: normal;
}
}
それが他の誰かに役立つことを願っています！非常に迷惑でいらいらさせるバグです。 :)