Проблемы CSS в Chrome и Safari даже с префиксами

Question

У меня есть эта часть CSS, и у меня проблемы с Chrome и Safari, хотя весь CSS-файл имеет префикс Autoprefixer (и дважды проверен с помощью Pleeeease). Почему? Предполагается, что это два ящика, которые имеют гибкое поведение в строке (.deuxcases), и каждый ящик имеет гибкое поведение в столбце (2 x .case), но в Chrome и Safari все это делает длинную грязную линию, отлично работает только на Fire Fox. Я использую 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

Вы всегда должны попробовать установить height и width для явных значений и не auto. Последний работает непоследовательно в браузерах, и именно поэтому вы боретесь с этим макетом.

Просто установите высоту на уровне .case на 100% вместо auto, и он будет работать как ожидалось.

Как это:

.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; 
}