Flex-colonne effondrement sur iPad

Question

Cette question a été soulevée de nombreuses fois auparavant, mais le modèle de flex a changé de façon spectaculaire et je suis toujours incapable de trouver une solution de travail.

LE PROBLEME

• Lorsque la direction de flexion d'un objet est réglé sur colonne, la hauteur de tous les objets effondrement (à savoir hauteur: 0)
• Le problème semble limitée à iProducts. Autant que je peux dire que Flex fonctionne comme prévu dans tous les navigateurs sur le bureau et sur Android.
• Le problème n'est pas limité à Safari car le problème est présent sur Chrome et Firefox lorsqu'il est testé sur un iPad (IOS 10.3.3).

Cet exemple illustre le problème. Lorsque la largeur est inférieure à 600px, les lignes passent en colonne et le problème sera présent.

.InputRow, 
 
.InputItem, 
 
.InputWrap { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 

 
.InputRow, 
 
.InputItem { 
 
    -ms-flex-flow: wrap; 
 
    flex-flow: wrap; 
 
} 
 

 
.InputItem, 
 
.InputWrap { 
 
    -ms-flex: 1 1 0%; 
 
    -webkit-box-flex: 1; 
 
    flex: 1 1 0%; 
 
} 
 

 
.InputWrap { 
 
    position: relative; 
 
    -ms-flex-pack: end; 
 
    -webkit-box-pack: end; 
 
    justify-content: flex-end; 
 
    -ms-flex-direction: column; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    flex-direction: column; 
 
    margin: 0 10px 10px 0; 
 
} 
 

 
@media all and (max-width:600px) { 
 
    .InputRow { 
 
    -ms-flex-direction: column; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    flex-direction: column; 
 
    -ms-flex-align: stretch; 
 
    -webkit-box-align: stretch; 
 
    align-items: stretch; 
 
    } 
 
} 
 

 
.Bx { 
 
    background: #b00; 
 
    border: 5px solid #333; 
 
}

<div class="InputRow"> 
 
    <div class="InputItem"> 
 
    <div class="InputWrap"> 
 
     <div class="Bx">Box 2</div> 
 
    </div> 
 
    </div> 
 
    <div class="InputItem"> 
 
    <div class="InputWrap"> 
 
     <div class="Bx">Box 2</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="InputRow"> 
 
    <div class="InputItem"> 
 
    <div class="InputWrap"> 
 
     <div class="Bx">ROW 2</div> 
 
    </div> 
 
    </div> 
 
</div>

Cela pourrait être un problème avec la structure d'imbrication j'ai installé ici, mais comme je l'ai dit la question est isolé.

Answer 1

Vous n'avez aucune hauteur définie, que ce soit sur des conteneurs ou des articles.

Pourtant, vous dites articles à utiliser l'espace libre:

.InputItem, 
.InputWrap { 
    flex: 1 1 0%; 
} 

Cette règle se décompose en:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0%

La règle flex-grow: 1 peut fonctionner correctement sur les écrans plus larges (flex-direction: row) car les conteneurs sont des éléments de niveau bloc (c'est-à-dire, largeur: 100%).

Mais sur les petits écrans (flex-direction: column), height est activée (via flex-basis) à 0%, flex-grow: 1 n'a pas d'espace supplémentaire pour travailler, et la hauteur des conteneurs (contrairement à sa largeur) par défaut auto (hauteur du contenu).

Je pense donc que la solution consiste à ajouter de la hauteur au conteneur ou aux articles.