Comment étirer les enfants pour remplir l'axe transversal?

141

J'ai une flexbox gauche-droite:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Développer l'extrait

Le problème est que le bon enfant ne se comporte pas de manière réactive. Pour être précis, je veux qu'il remplisse la hauteur de l'emballage.

Comment y parvenir?

css flexbox

— Deborah Cole
source

il remplit la hauteur de l'emballage! Je l'ai testé dans Chrome et Firefox et il n'y a pas eu de problème. peut-être avez-vous trop simplifié votre code. vous pouvez tester cela en définissant background-colorpour les enfants ou en définissant align-items: centerdans wrapper.

— samad montazeri

oui, la hauteur de l'emballage n'est pas renseignée en safari pour certaines raisons ... Chrome et Firefox le font bien en réglant la hauteur: '100%' chez les enfants

— Pencilcheck

175

Les enfants d'un conteneur row-flexbox remplissent automatiquement l'espace vertical du conteneur.
Spécifiez flex: 1;pour un enfant si vous souhaitez qu'il remplisse l'espace horizontal restant:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Développer l'extrait

Spécifiez flex: 1;pour les deux enfants si vous souhaitez qu'ils remplissent des quantités égales de l'espace horizontal:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Développer l'extrait

— Alex Shesterov
source

flexest une propriété de raccourci pour flex-grow, flex-shrinket flex-basis. flex: 1;équivaut à flex-grow: 1;.

— Rory O'Kane

On dirait que ce align-items: stretch;n'est pas nécessaire

— Matt