web-dev-qa-db-fra.com

Hauteur 100% sur flexbox colonne enfant)

J'ai des problèmes avec une colonne flexbox dans laquelle les enfants de l'élément flex'd ne répondent pas à height en pourcentages. Je ne l'ai vérifié que dans Chrome, et d'après ce que j'ai compris, c'est un problème Chrome. Voici mon exemple:

HTML

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

CSS

.flexbox{
  position:absolute;
  background:black;
  width:100%;
  height:100%;

  display: flex;
  flex-direction:column;
}

.flex{
  background:blue;
  flex:1;
}

.flex-child{
  background:red;
  height:100%;
  width:100%;
  display:block;
}

.static{
  background:green;
  width:100%;
  height:5rem;
}

Voici le CodePen.

Je le veux si le rouge .flex-child remplit le bleu .flex. Pourquoi ne pas height:100% travail?

cssgoogle-chromeheightpercentageflexbox
77
CourtDemone

TL; DR: Réglez .flex Sur display:flex Et supprimez le height:100% Sur .flex-child. Vous pouvez voir le CodePen modifié ici.

Pourquoi ça marche:

J'ai appris de cette question similaire que, selon la spécification flexbox, une valeur align-self:stretch (La valeur par défaut pour un élément flex'd) ne change que le valeur utilisée de la propriété de taille croisée d'un élément (dans ce cas, height). Les pourcentages sont toutefois calculés à partir de la valeur spécifiée de la propriété de taille croisée du parent, et non de sa valeur utilisée. Si jamais vous ouvrez votre inspecteur et que vous voyez height:100% Sous "Styles" mais height:1200px Sous "Calculé", vous obtenez le spécifié et utilisé valeurs respectivement.

Il semble que Chrome respecte la spécification à cet égard. Cela signifie que le réglage de height:100% Sur .flex-child Signifie que 100% de la valeur spécifiée de height de .flex. Comme nous n’avons pas spécifié de height sur .flex, cela signifie que nous récupérons 100% de la valeur par défaut height, qui auto. Vous voyez pourquoi le moteur de mise en page est confus?

Paramétrer .flex Sur display:flex Et supprimer le height:100% De .flex-child (Afin d'éviter de continuer à définir 100% de auto ) fera que .flex-child remplisse tout .flex

Quand cela ne fonctionnera pas:

Cela ne fonctionnera pas si vous essayez de ne remplir qu'une partie de .flex, Ex. essayer de définir .flex-child sur height:90%, car fléchir l'enfant signifie qu'il remplira tout l'espace disponible. Je pensais que vous pourriez peut-être le pirater avec un positionnement absolu, mais cela ne semble pas fonctionner non plus. Vous pouvez pirater en ajoutant un deuxième enfant à .flex Que nous appellerons .spacer, Et en réglant .spacer Sur flex:1 Et .flex-child Sur flex:9 (Veillez également à définir flex-direction:column Sur .flex Également). Un bidouillage, mais le seul moyen que je pourrais résoudre ce problème. Voici le CodePen.

Espérons que nous n’avons pas besoin de continuer à compter sur cela et qu’ils changeront simplement les spécifications pour agir plus comme prévu.

109
CourtDemone