Ich habe 2 Divs nebeneinander in einer Flexbox. Die rechte Hand sollte immer gleich breit sein, und ich möchte, dass die linke Hand nur den verbleibenden Platz ergreift. Dies wird jedoch nicht der Fall sein, es sei denn, ich habe die Breite speziell festgelegt.

So im Moment ist es auf 96% eingestellt, was in Ordnung aussieht, bis Sie den Bildschirm wirklich zerquetschen - dann wird das rechte Div ein bisschen ausgehungert von dem Platz, 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:

das Richtige ist immer dasselbe; du auf der linken Seite - du bekommst alles was übrig ist

.ar-course-nav {
  cursor: poin,ter;
  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>