CSS Problems on Chrome and Safari even with prefixes

Question

I have this part of CSS and I have problems on Chrome and Safari even though the whole CSS file has been prefixed with Autoprefixer (and double checked with Pleeeease). Any clue why ? It's supposed to be 2 boxes having a flex behaviour on row (.deuxcases), and each box has a flex behavior on column (2 x .case), but on Chrome and Safari it's all making a long messy line, works fine only on Firefox. I use Chrome 50 and Safari 8.0.2. Thank you

.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

You should always try setting height and width to explicit values and not to auto. The latter works inconsistently across browsers, and that's why you are struggling with this layout.

Just set the height on the .case class to 100% instead of auto, and it'll work as expected.

Like this:

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