web-dev-qa-db-fra.com

Empêcher la hauteur des éléments flexibles de s'agrandir pour correspondre à d'autres éléments flexibles

J'ai deux éléments à l'intérieur d'un conteneur, qui sont côte à côte en utilisant une boîte flexible. Sur le deuxième élément (.flexbox-2), Je mets sa hauteur dans le CSS. Cependant, alors le premier élément (.flexbox-1) correspondra à la hauteur de .flexbox-2. Comment pourrais-je m'arrêter .flexbox-1 correspondant à la hauteur de .flexbox-2 et conserve-t-il sa hauteur naturelle?

Voici ce que j'ai jusqu'ici (également disponible en tant que jsFiddle )

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>
htmlcssflexbox
64
Tom Oakley

Ceci est une ancienne solution. Ma réponse est remplacée par celle-ci nouvelle réponse d'Aaron utilisant align-self . C'est une meilleure solution qui ne repose pas sur une bizarrerie CSS.

Tant que le conteneur flex n'a pas de hauteur lui-même , vous pouvez définir height: 0% sur le premier élément flexible. Parce qu'il n'a pas de hauteur à hériter de son parent, toute pourcentage hauteur le réduira. Il va ensuite grandir avec son contenu.

Exemple

Dans cet exemple, j'ai supprimé le -webkit préfixe. Ce n'est vraiment nécessaire que pour Safari et le préfixe peut être ajouté ci-dessus la version sans préfixe. J'ai aussi enlevé flex-direction: row comme il s’agit de la valeur par défaut.

.container {
  display: flex;
}
.flexbox-1 {
  flex: 1;  
  height: 0%;  
  border: solid 3px red;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>
44
misterManSam

Je sais que c’est une vieille question, mais une meilleure solution consiste à définir l’élément Flex de manière à ce qu’il soit aligné au sommet en utilisant flex-start.

/* Default Styles */
.container {
  display: flex;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
 .flexbox-1 {
  flex: 1;  
  align-self: flex-start;  
  border: solid 3px red;
}
<div class="container">
  <div class="flexbox-1">"align-self: flex-start;"</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>
108
Aaron

Paramétrer le height des enfants sur max-content va les empêcher de rétrécir.

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
  height: max-content;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>
0
Erik Martín Jordán