Tornar o preenchimento div restante * horizontal * no flexbox

Eu tenho 2 divs lado a lado em um flexbox. A mão direita deve sempre ter a mesma largura, e eu quero que a mão esquerda pegue o espaço restante. Mas não será, a menos que eu defina especificamente sua largura.

Portanto, no momento, ele está definido como 96%, o que parece bom até você realmente apertar a tela - então a div direita fica um pouco faminta do espaço necessário.

Acho que poderia deixar como está, mas parece errado - como se houvesse uma maneira de dizer:

o certo é sempre o mesmo; você à esquerda - você recebe tudo o que 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>

Use a flex-growpropriedade para fazer com que um item flexível consuma espaço livre no eixo principal .

Essa propriedade expandirá o item o máximo possível, ajustando o comprimento a ambientes dinâmicos, como redimensionamento de tela ou adição / remoção de outros itens.

Um exemplo comum é flex-grow: 1ou, usando a propriedade abreviada flex: 1,.

Portanto, em vez de width: 96%no seu div, use flex: 1.

Você escreveu:

Portanto, no momento, ele está definido como 96%, o que parece bom até você realmente apertar a tela - então a div direita fica um pouco faminta do espaço necessário.

A compressão da div de largura fixa está relacionada a outra propriedade flex: flex-shrink

Por padrão, os itens flexíveis são configurados para flex-shrink: 1permitir a redução, a fim de impedir o estouro do contêiner.

Para desativar esse recurso, use flex-shrink: 0.

Para mais detalhes, consulte Aflex-shrink seção de fatores na resposta aqui:

• Quais são as diferenças entre base flexível e largura?

Saiba mais sobre o alinhamento flexível ao longo do eixo principal aqui:

• No CSS Flexbox, por que não existem propriedades "justify-items" e "justify-self"?

Saiba mais sobre o alinhamento flexível ao longo do eixo transversal aqui:

• Como o flex-wrap funciona com alinhar-se, alinhar itens e alinhar conteúdo?

Basicamente, eu estava tentando fazer com que meu código tivesse uma seção do meio em uma 'linha' para se ajustar automaticamente ao conteúdo dos dois lados (no meu caso, um separador de linhas pontilhadas). Como o @Michael_B sugeriu, a chave está usando display:flexno contêiner de linha e, pelo menos, certificando-se de que seu contêiner do meio na linha tenha um flex-growvalor pelo menos 1 maior que os contêineres externos (se contêineres externos não tiverem flex-growpropriedades aplicadas, contêiner intermediário) só precisa de 1 para flex-grow).

Aqui está uma foto do que eu estava tentando fazer e um exemplo de código de como eu o resolvi.

Editar: a borda inferior pontilhada provavelmente parecerá estranha, dependendo de como o navegador a exibir. Eu, pessoalmente, recomendo usar um SVG de círculo preto como uma imagem de fundo repetida, adequadamente dimensionada e posicionada na parte inferior do contêiner do meio. Adicionarei esta solução alternativa quando eu tiver 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>