プレフィックス付きでもChromeとSafariのCSSに関する問題

Question

私はCSSのこの部分を持っていますが、CSSファイル全体にプレフィックスが付いていて（Pleeeeaseでダブルチェックされていますが）、ChromeとSafariに問題があります。任意の手掛かりはなぜですか？行（.deuxcases）にフレックス動作を持つ2つのボックスがあり、各ボックスには列（2 x .case）のフレックス動作がありますが、ChromeとSafariでは長い間乱雑な行があり、 Firefox。私はChrome 50とSafari 8.0.2を使用しています。あなたは

.deuxcases { 
margin-top: 70px; 
max-height: 60vh; 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-orient:horizontal; 
-webkit-box-direction:normal; 
-webkit-flex-direction:row; 
    -ms-flex-direction:row; 
     flex-direction:row; 
-webkit-flex-wrap:nowrap; 
    -ms-flex-wrap:nowrap; 
     flex-wrap:nowrap; 
-webkit-box-pack:justify; 
-webkit-justify-content:space-between; 
    -ms-flex-pack:justify; 
     justify-content:space-between; 
} 

.case { 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-orient:vertical; 
-webkit-box-direction:normal; 
-webkit-flex-direction:column; 
    -ms-flex-direction:column; 
     flex-direction:column; 
-webkit-box-pack:center; 
-webkit-justify-content:center; 
    -ms-flex-pack:center; 
     justify-content:center; 
-webkit-flex-wrap:wrap; 
    -ms-flex-wrap:wrap; 
     flex-wrap:wrap; 
-webkit-box-flex:1; 
-webkit-flex:1; 
    -ms-flex:1; 
     flex:1; 
padding:auto; 
margin:10%; 
height: auto; 
min-width: 25vw; 
box-shadow: .5em .5em .5em .5em #aaa; 
} 

Answer 1

あなたはいつもautoにheightとwidth明示的な値にしていないを設定してみてくださいありがとうございました。後者はブラウザ間で一貫して動作しないため、このレイアウトでは苦労しています。

.caseクラスの高さを100%の代わりにに設定すると、期待どおりに機能します。このよう

：

.case { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient:vertical; 
    -webkit-box-direction:normal; 
    -webkit-flex-direction:column; 
     -ms-flex-direction:column; 
      flex-direction:column; 
    -webkit-box-pack:center; 
    -webkit-justify-content:center; 
     -ms-flex-pack:center; 
      justify-content:center; 
    -webkit-flex-wrap:wrap; 
     -ms-flex-wrap:wrap; 
      flex-wrap:wrap; 
    -webkit-box-flex:1; 
    -webkit-flex:1; 
     -ms-flex:1; 
      flex:1; 
    padding:auto; 
    margin:10%; 
    height: 100%; 
    min-width: 25vw; 
    box-shadow: .5em .5em .5em .5em #aaa; 
}