Remplir la hauteur ou la largeur restante dans un conteneur flexible

Question

J'ai 2 divs côte à côte dans un flexbox. Celle de droite doit toujours avoir la même largeur, et je veux que celle de gauche prenne simplement l'espace restant. Mais il ne le fait pas, à moins que je ne définisse spécifiquement sa largeur.

Pour l'instant, elle est réglée sur 96 %, ce qui est correct jusqu'à ce que vous écrasiez vraiment l'écran - la division de droite est alors un peu privée de l'espace dont elle a besoin.

Je suppose que je pourrais le laisser tel quel, mais ça ne me semble pas correct, comme s'il devait y avoir un moyen de le dire :

celui de droite est toujours le même ; toi, à gauche, tu as tout ce qui reste.

.ar-course-nav {
  cursor: pointer;
  padding: 8px 12px 8px 12px;
  border-radius: 8px;
}
.ar-course-nav:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
  <div style="width:96%;">
    <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
      <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
                Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
            </strong>
    </div>
    <div style="width:100%; display:flex; justify-content:space-between;">
      <div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
        A really really really really really really really really really really really long department name
      </div>
      <div style="color:#555555; text-align:right; white-space:nowrap;">
        Created: 21 September 2016
      </div>
    </div>
  </div>
  <div style="margin-left:8px;">
    <strong>&gt;</strong>
  </div>
</div>

Answer 1

Utilisez le flex-grow pour qu'un élément flexible consomme de l'espace libre sur l'axe principal .

Cette propriété permet de développer l'élément autant que possible, en adaptant la longueur aux environnements dynamiques, tels que le redimensionnement de l'écran ou l'ajout/le retrait d'autres éléments.

Un exemple courant est flex-grow: 1 ou, en utilisant la propriété abrégée, flex: 1 .

Par conséquent, au lieu de width: 96% sur votre div, utilisez flex: 1 .

---

Vous avez écrit :

Pour l'instant, elle est réglée sur 96 %, ce qui est correct jusqu'à ce que vous écrasiez vraiment l'écran - la division de droite est alors un peu privée de l'espace dont elle a besoin.

L'écrasement de la division à largeur fixe est lié à une autre propriété de flex : flex-shrink

Par défaut, les éléments flexibles sont définis sur flex-shrink: 1 ce qui leur permet de se rétracter afin d'éviter le débordement du conteneur.

Pour désactiver cette fonction, utilisez flex-shrink: 0 .

Pour plus de détails, voir El flex-shrink facteur dans la réponse ici :

• Quelles sont les différences entre la base flexible et la largeur ?

---

Apprenez-en davantage sur l'alignement des flexibles le long du axe principal ici :

• Dans CSS Flexbox, pourquoi n'y a-t-il pas de propriétés "justify-items" et "justify-self" ?

Apprenez-en davantage sur l'alignement des flexibles le long du axe transversal ici :

• Comment fonctionne le flex-wrap avec align-self, align-items et align-content ?

Answer 2

En fait, j'essayais de faire en sorte que mon code ait une section centrale sur une "ligne" qui s'adapte automatiquement au contenu des deux côtés (dans mon cas, un séparateur de ligne en pointillé). Comme @Michael_B l'a suggéré, la clé est l'utilisation de display:flex sur le conteneur de la rangée et au moins s'assurer que le conteneur du milieu de la rangée possède un flex-grow d'une valeur supérieure d'au moins 1 à celle des conteneurs extérieurs (si les conteneurs extérieurs n'ont pas de flex-grow appliquées, le conteneur central n'en a besoin que d'une seule pour flex-grow ).

Voici une image de ce que j'ai essayé de faire et un exemple de code pour savoir comment j'ai résolu le problème.

.row {
  background: lightgray;
  height: 30px;
  width: 100%;
  display: flex;
  align-items:flex-end;
  margin-top:5px;
}
.left {
  background:lightblue;
}
.separator{
  flex-grow:1;
  border-bottom:dotted 2px black;
}
.right {
  background:coral;
}

<div class="row">
  <div class="left">Left</div>
  <div class="separator"></div>
  <div class="right">Right With Text</div>
</div>
<div class="row">
  <div class="left">Left With More Text</div>
  <div class="separator"></div>
  <div class="right">Right</div>
</div>
<div class="row">
  <div class="left">Left With Text</div>
  <div class="separator"></div>
  <div class="right">Right With More Text</div>
</div>