Lassen Sie div den verbleibenden * horizontalen * Raum in der Flexbox füllen

Ich habe 2 Divs nebeneinander in einer Flexbox. Die rechte Hand sollte immer die gleiche Breite haben, und ich möchte, dass die linke Hand nur den verbleibenden Platz einnimmt. Aber es wird nicht, wenn ich nicht speziell seine Breite eingestellt habe.

Im Moment ist es also auf 96% eingestellt, was in Ordnung aussieht, bis Sie den Bildschirm wirklich zerquetschen - dann wird der rechte Div ein wenig von dem Platz ausgehungert, den er benötigt.

Ich denke, ich könnte es so lassen, wie es ist, aber es fühlt sich falsch an - als müsste es einen Weg geben zu sagen:

der richtige ist immer der gleiche; Sie auf der linken Seite - Sie bekommen alles, was übrig ist

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

Verwenden Sie die flex-growEigenschaft, damit ein Flex-Element freien Speicherplatz auf der Hauptachse belegt .

Diese Eigenschaft erweitert das Element so weit wie möglich und passt die Länge an dynamische Umgebungen an, z. B. an die Größe des Bildschirms oder das Hinzufügen / Entfernen anderer Elemente.

Ein häufiges Beispiel ist flex-grow: 1oder unter Verwendung der Shorthand-Eigenschaft flex: 1.

width: 96%Verwenden Sie daher anstelle Ihres Divs flex: 1.

Sie schrieben:

Im Moment ist es also auf 96% eingestellt, was in Ordnung aussieht, bis Sie den Bildschirm wirklich zerquetschen - dann wird der rechte Div ein wenig von dem Platz ausgehungert, den er benötigt.

Das Quetschen des Div mit fester Breite hängt mit einer anderen Flex-Eigenschaft zusammen: flex-shrink

Standardmäßig sind Flex-Elemente so eingestellt, flex-shrink: 1dass sie verkleinert werden können, um ein Überlaufen des Containers zu verhindern.

Um diese Funktion zu deaktivieren, verwenden Sie flex-shrink: 0.

Weitere Details finden Der flex-shrinkFaktor Abschnitt in der Antwort hier:

• Was sind die Unterschiede zwischen Flex-Basis und Breite?

Weitere Informationen zur Flexausrichtung entlang der Hauptachse finden Sie hier:

• Warum gibt es in CSS Flexbox keine Eigenschaften "Elemente rechtfertigen" und "Selbst rechtfertigen"?

Weitere Informationen zur Flexausrichtung entlang der Querachse finden Sie hier:

• Wie funktioniert Flex-Wrap mit Align-Self, Align-Items und Align-Content?

Grundsätzlich habe ich versucht, meinen Code so zu gestalten, dass er einen mittleren Abschnitt in einer 'Zeile' hat, um sich automatisch an den Inhalt auf beiden Seiten anzupassen (in meinem Fall ein Trennzeichen mit gepunkteten Linien). Wie von @Michael_B vorgeschlagen, wird der Schlüssel display:flexfür den Zeilencontainer verwendet und stellt zumindest sicher, dass Ihr mittlerer Container in der Zeile einen flex-growWert von mindestens 1 höher als die äußeren Container hat (wenn für äußere Container keine flex-growEigenschaften angewendet wurden, mittlerer Container braucht nur 1 für flex-grow).

Hier ist ein Bild von dem, was ich versucht habe, und ein Beispielcode für die Lösung.

Bearbeiten: Der gepunktete untere Rand sieht wahrscheinlich seltsam aus, je nachdem, wie Ihr Browser ihn anzeigt. Ich persönlich würde empfehlen, ein SVG mit schwarzem Kreis als wiederholtes Hintergrundbild zu verwenden, das die richtige Größe hat und am Boden des mittleren Containers positioniert ist. Füge diese alternative Lösung hinzu, wenn ich Zeit habe.

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