Comment définir la largeur d'une sous-liste d'éléments flex:auto

Question

Bonjour, j'ai une question CSS. Il y a deux colonnes, la colonne de droite (B) a une largeur fixe de 100 px et la colonne de gauche (A) doit remplir la largeur restante. De plus, dans la colonne A, vous trouverez une liste de sous-composants ajoutés horizontalement.

Le problème est que lors de l'ajout de composants enfants, la largeur de la colonne A devient plus longue et la colonne B devient plus basse.

Comment puis-je ajouter un sous-composant à la ligne inférieure de la colonne A s'il dépasse la largeur de la colonne A ?

• Lorsque le nombre d'éléments enfants est faible
• Lorsque le nombre d'éléments enfants augmente (tel quel)
• Quand le nombre d'éléments enfants augmente (TO-BE)

Answer 1

Vous pouvez utiliser la grille d'affichage au lieu de Flex. A l'aide de la grille, vous pouvez définir si un élément est dynamique ou statique.

Exemple :

.main {
  display: grid;
  grid-template-columns: 1fr 100px;
}

<div class="main">
  <div class="dynamic-size">
    I am dynamic in size
  </div>
  <div class="static-size">
    I'll always be 100px
  </div>
</div>

Le 1fr dans grid-template-columns représente un espace libre, ce qui signifie que tout l'espace sauf 100px du deuxième élément sera rempli par le premier élément.

Answer 2

Utilisez flex-wrap à la fois sur l'ensemble du conteneur et sur A, et définissez la largeur de la boîte A sur calc (100 % - 100 px).

body {
  width: 100vw;
  padding: 0;
  margin: 0;
  color: white;
}

#flex {
  display: flex;
  background-color: grey;
  width: 100vw;
  height: fit-content;
  flex-wrap: wrap;
}

#a {
  width: calc(100% - 100px);
  height: fit-content;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

#a .x {
  width: 100px;
  margin: 10px;
  background-color: green;
  height: 200px;
}

#b {
  width: 100px;
  height: 500px;
  background-color: blue;
}

<div id="flex">
  <div id="a"> A
    <div class="x">X</div>
    <div class="x">X</div>
    <div class="x">X</div>

  </div>
  <div id="b">
    B
  </div>
</div>