Comment puis-je corriger le problème de mise en page flexible de 50% dans Safari?

Question

J'ai un petit exemple de disposition flexible et j'ai un problème avec Safari (Version 10.1.2 (12603.3.8))

Donc il y a un contenu et à l'intérieur de celui-ci il y a quatre cases, avec la disposition de 2x2. En bas, il y a une section de pied de page. Je voudrais placer les boîtes à l'intérieur du contenu div pour remplir sa hauteur de 50% de hauteur et de largeur. Mais dans Safari, il semble qu'il ignore la section de pied de page et place les cases à aligner sur la page entière.

Alors voilà ce que je veux atteindre et il fonctionne en chrome:

Et c'est à quoi il ressemble dans Safari:

J'ai réussi à essayer dans High Sierra où est un nouveau Safari (Ver.11) et ça marche. Cela doit donc être un bug, mais pouvons-nous gérer cela dans Safari 10? Je vous remercie!

Ici, il est mon code

HTML:

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body, html { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: white; 
 
    border: 1px solid tomato; 
 
} 
 

 
.box { 
 
    width: 50%; 
 
    height: 50%; 
 
    background: skyblue; 
 
    border: 1px solid black; 
 
} 
 

 
.footer { 
 
    opacity: 0.7; 
 
    flex: 0 0 auto; 
 
    height: 100px; 
 
    background: plum; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div>  
 
    </div> 
 
    <div class="footer"></div> 
 
</div>

Answer 1

Depuis content est un élément de la colonne flex ne pas utiliser height pour faire remplir son parent, vous utilisez flex-grow.

Retirez la hauteur sur content et ajouter flex-grow: 1

.content { 
    flex-grow: 1;     /* added */ 
    display: flex; 
    flex-wrap: wrap; 
    background: white; 
    border: 1px solid tomato; 
} 

pas besoin de width: 100%, il fait également que par défaut

Stack snippet

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body, html { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
.content { 
 
    flex-grow: 1; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background: white; 
 
    border: 1px solid tomato; 
 
} 
 

 
.box { 
 
    width: 50%; 
 
    background: skyblue; 
 
    border: 1px solid black; 
 
} 
 

 
.footer { 
 
    opacity: 0.7; 
 
    flex: 0 0 auto; 
 
    height: 100px; 
 
    background: plum; 
 
}

<div class="wrapper"> 
 

 
    <div class="content"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div>  
 
    </div> 
 

 
    <div class="footer"></div> 
 

 
</div>