Haga que el relleno div quede espacio * horizontal * restante en flexbox

Tengo 2 divs uno al lado del otro en una caja flexible. El de la derecha siempre debe tener el mismo ancho, y quiero que el de la izquierda solo tome el espacio restante. Pero no lo hará a menos que establezca específicamente su ancho.

Entonces, en este momento, está configurado en 96%, lo que se ve bien hasta que realmente aplastas la pantalla, luego el div de la mano derecha se queda un poco hambriento del espacio que necesita.

Creo que podría dejarlo como está, pero se siente mal, como si tuviera que haber una manera de decir:

el correcto es siempre el mismo; a la izquierda, obtienes todo lo que queda

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

Use la flex-growpropiedad para hacer que un elemento flexible consuma espacio libre en el eje principal .

Esta propiedad expandirá el elemento tanto como sea posible, ajustando la longitud a entornos dinámicos, como el cambio de tamaño de la pantalla o la adición / eliminación de otros elementos.

Un ejemplo común es flex-grow: 1o, utilizando la propiedad abreviada, flex: 1.

Por lo tanto, en lugar de width: 96%en su div, use flex: 1.

Tu escribiste:

Entonces, en este momento, está configurado en 96%, lo que se ve bien hasta que realmente aplastas la pantalla, luego el div de la mano derecha se queda un poco hambriento del espacio que necesita.

El aplastamiento del div de ancho fijo está relacionado con otra propiedad flex: flex-shrink

De manera predeterminada, los elementos flexibles están configurados para flex-shrink: 1que puedan reducirse y evitar el desbordamiento del contenedor.

Para deshabilitar esta función, use flex-shrink: 0.

Para obtener más detalles, consulte laflex-shrink sección El factor en la respuesta aquí:

• ¿Cuáles son las diferencias entre base flexible y ancho?

Obtenga más información sobre la alineación flexible a lo largo del eje principal aquí:

• En CSS Flexbox, ¿por qué no hay propiedades "justify-items" y "justify-self"?

Obtenga más información sobre la alineación flexible a lo largo del eje transversal aquí:

• ¿Cómo funciona flex-wrap con align-self, align-items y align-content?

Básicamente, estaba tratando de hacer que mi código tuviera una sección central en una 'fila' para autoajustarse al contenido en ambos lados (en mi caso, un separador de línea de puntos). Como sugirió @Michael_B, la clave se usa display:flexen el contenedor de la fila y al menos se asegura de que el contenedor del medio en la fila tenga un flex-growvalor de al menos 1 más alto que los contenedores externos (si los contenedores externos no tienen ninguna flex-growpropiedad aplicada, contenedor central solo necesita 1 paraflex-grow ).

Aquí hay una foto de lo que estaba tratando de hacer y un código de muestra de cómo lo resolví.

Editar: el borde inferior punteado probablemente se verá extraño dependiendo de cómo lo muestre su navegador. Yo personalmente recomendaría usar un SVG de círculo negro como una imagen de fondo repetida, de tamaño adecuado y colocada en la parte inferior del contenedor central. Agregaré esta solución alternativa cuando tenga tiempo.

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