Füllen Sie die verbleibende Höhe oder Breite in einen Flexbehälter

Ich habe 2 Divs nebeneinander in einer Flexbox. Der rechte sollte immer die gleiche Breite haben, und ich möchte, dass der linke nur den verbleibenden Platz ergreift. Aber es wird nicht, es sei denn, ich stelle seine Breite ausdrücklich ein.

Im Moment ist es also auf 96% eingestellt, was OK aussieht, bis Sie den Bildschirm wirklich zusammendrücken – dann wird dem rechten Div ein wenig der Platz verhungert, den es 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 rechte ist immer gleich; 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-grow -Eigenschaft, um ein Flex-Element dazu zu bringen, freien Speicherplatz zu verbrauchen auf der Hauptachse.

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

Ein gängiges Beispiel ist flex-grow: 1 oder unter Verwendung der Kurzschrifteigenschaft flex: 1.

Daher statt width: 96% Verwenden Sie auf Ihrem div flex: 1.

Sie schrieben:

Im Moment ist es also auf 96% eingestellt, was OK aussieht, bis Sie den Bildschirm wirklich zusammendrücken – dann wird dem rechten Div ein wenig der Platz verhungert, den es benötigt.

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

Standardmäßig sind Flex-Elemente auf eingestellt flex-shrink: 1 wodurch sie schrumpfen können, um ein Überlaufen des Behälters zu verhindern.

Verwenden Sie zum Deaktivieren dieser Funktion flex-shrink: 0.

Näheres siehe Die flex-shrink Faktor Abschnitt in der Antwort hier:

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

Erfahren Sie mehr über die flexible Ausrichtung entlang der Hauptachse Hier:

• Warum gibt es in CSS Flexbox keine „justify-items“- und „justify-self“-Eigenschaften?

Erfahren Sie mehr über die flexible Ausrichtung entlang der Querachse Hier:

• Wie funktioniert Flex-Wrap mit align-self, align-items und align-content?

Im Grunde habe ich versucht, meinen Code so zu bekommen, 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 gepunkteter Linie). Wie @Michael_B vorgeschlagen hat, verwendet der Schlüssel display:flex auf dem Reihencontainer und stellen Sie zumindest sicher, dass Ihr mittlerer Container in der Reihe eine hat flex-grow Wert um mindestens 1 höher als die Außenbehälter (wenn Außenbehälter keine haben flex-grow Eigenschaften angewendet, mittlerer Behälter benötigt nur 1 für flex-grow).

Hier ist ein Bild von dem, was ich versucht habe, und ein Beispielcode, wie ich es gelöst 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>