Rendre le remplissage div restant * horizontal * espace dans flexbox

J'ai 2 divs côte à côte dans une flexbox. Celui de droite doit toujours avoir la même largeur, et je veux que celui de gauche saisisse simplement l'espace restant. Mais ce ne sera pas le cas, sauf si j'ai défini spécifiquement sa largeur.

Donc, pour le moment, il est réglé à 96%, ce qui semble correct jusqu'à ce que vous écrasiez vraiment l'écran - puis le div de droite devient un peu affamé de l'espace dont il a besoin.

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

la bonne est toujours la même; vous à gauche - vous obtenez 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>

Utilisez la flex-growpropriété pour qu'un élément flexible consomme de l'espace libre sur l'axe principal .

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

Un exemple courant est flex-grow: 1ou, en utilisant la propriété de raccourci,flex: 1 .

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

Tu as écrit:

Donc, pour le moment, il est réglé à 96%, ce qui semble correct jusqu'à ce que vous écrasiez vraiment l'écran - puis le div de droite devient un peu affamé de l'espace dont il a besoin.

L'écrasement du div à largeur fixe est lié à une autre propriété flex: flex-shrink

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

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

Pour plus de détails, voir laflex-shrink section Facteur dans la réponse ici:

• Quelles sont les différences entre flex-base et largeur?

En savoir plus sur l'alignement flexible le long de l' axe principal ici:

• Dans CSS Flexbox, pourquoi n'y a-t-il pas de propriétés "justifier-éléments" et "justifier-soi"?

En savoir plus sur l'alignement flexible le long de l' axe transversal ici:

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

Fondamentalement, j'essayais d'obtenir que mon code ait une section centrale sur une «ligne» pour s'ajuster automatiquement au contenu des deux côtés (dans mon cas, un séparateur de ligne pointillée). Comme l'a suggéré @Michael_B, la clé utilise display:flexsur le conteneur de ligne et s'assure au moins que votre conteneur du milieu sur la ligne a une flex-growvaleur d'au moins 1 supérieure aux conteneurs externes (si les conteneurs externes n'ont aucune flex-growpropriété appliquée, conteneur du milieu n'a besoin que de 1 pour flex-grow).

Voici une photo de ce que j'essayais de faire et un exemple de code pour savoir comment je l'ai résolu.

Modifier: la bordure inférieure en pointillés sera probablement bizarre selon la façon dont votre navigateur l'affiche. Je recommanderais personnellement d'utiliser un SVG de cercle noir comme image d'arrière-plan répétée, correctement dimensionné et positionné au fond du conteneur du milieu. Ajoutera cette solution alternative lorsque j'aurai le temps.

.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>