Fai riempire div spazio * orizzontale * rimanente in flexbox

Ho 2 div fianco a fianco in un flexbox. La mano destra dovrebbe sempre avere la stessa larghezza e voglio che la mano sinistra afferri solo lo spazio rimanente. Ma non lo farà a meno che non abbia impostato specificamente la sua larghezza.

Quindi, al momento, è impostato al 96%, che sembra OK fino a quando non schiacci davvero lo schermo - quindi il div della mano destra diventa un po 'affamato dello spazio di cui ha bisogno.

Immagino che potrei lasciarlo così com'è ma sembra sbagliato - come se ci fosse un modo per dire:

quello giusto è sempre lo stesso; tu a sinistra - ottieni tutto ciò che resta

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

Utilizzare la flex-growproprietà per fare in modo che un oggetto flessibile consumi spazio libero sull'asse principale .

Questa proprietà espande l'elemento il più possibile, adattando la lunghezza agli ambienti dinamici, come il ridimensionamento dello schermo o l'aggiunta / rimozione di altri elementi.

Un esempio comune è flex-grow: 1o, utilizzando la proprietà stenografia, flex: 1.

Quindi, anziché width: 96%sul tuo div, usa flex: 1.

Hai scritto:

Quindi, al momento, è impostato al 96%, che sembra OK fino a quando non schiacci davvero lo schermo - quindi il div della mano destra diventa un po 'affamato dello spazio di cui ha bisogno.

Lo schiacciamento del div a larghezza fissa è correlato a un'altra proprietà flessibile: flex-shrink

Per impostazione predefinita, gli elementi flessibili sono impostati su flex-shrink: 1che consente loro di ridursi al fine di evitare il trabocco del contenitore.

Per disabilitare questa funzione usare flex-shrink: 0.

Per ulteriori dettagli, consultare laflex-shrink sezione Fattore nella risposta qui:

• Quali sono le differenze tra flex-base e larghezza?

Ulteriori informazioni sull'allineamento flessibile qui lungo l' asse principale :

• Nel CSS Flexbox, perché non ci sono proprietà "justify-items" e "justify-self"?

Ulteriori informazioni sull'allineamento flessibile qui lungo l' asse trasversale :

• Come funziona flex-wrap con align-self, align-items e align-content?

Fondamentalmente stavo cercando di ottenere il mio codice per avere una sezione centrale su una 'riga' per adattarsi automaticamente al contenuto su entrambi i lati (nel mio caso, un separatore di linee tratteggiate). Come suggerito da @Michael_B, la chiave sta usando display:flexsul contenitore della riga e almeno assicurarsi che il proprio contenitore centrale sulla riga abbia un flex-growvalore di almeno 1 superiore rispetto ai contenitori esterni (se i contenitori esterni non hanno alcuna flex-growproprietà applicata, contenitore intermedio ne serve solo 1 per flex-grow).

Ecco una foto di quello che stavo cercando di fare e un codice di esempio per come l'ho risolto.

Modifica: il bordo inferiore tratteggiato apparirà probabilmente strano a seconda di come viene visualizzato dal browser. Personalmente consiglierei di utilizzare un cerchio nero SVG come immagine di sfondo ripetuta, correttamente dimensionata e posizionata sul fondo del contenitore centrale. Aggiungerò questa soluzione alternativa quando avrò tempo.

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