web-dev-qa-db-ja.com

CSSの重複flexbox Safariのアイテム

Safariがデフォルトのフレックスコンテナー内のフレックスアイテムをオーバーラップしないように強制する正しいCSSは何ですか？

Safariは幅が広すぎて、コンテンツの多いアイテムを変更できないようです。

Safari：（Mac OS X 10.10.5 Yosemiteのv8.0.8）
flex-items-safari.png

フレックスアイテムは、ChromeおよびFirefoxで正常に表示されます。

Chrome：
enter image description here


CSS：

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


HTML：

<main>
   <div>
      Doh!!!!!!!!!!!
   </div>
   <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam.
   </div>
</main>

コードをいじる：
http://jsfiddle.net/LL05grus/6

htmlcsssafariflexbox
29
Dem Pilafian

要素は縮小しています。縮小要素のflex-shrinkプロパティを0に設定する必要があります。

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

IPadでフレックスボックスの方向が列が重なる項目に変更されるという同様の問題もありました。問題はflex: 0 1 0;プロパティが子要素に適用されました。基本値をautoにします。 flex: 0 1 auto;

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