Buat div isikan sisa * horisontal * spasi di flexbox

Saya memiliki 2 divs berdampingan di sebuah flexbox. Tangan kanan harus selalu sama lebar, dan saya ingin tangan kiri hanya mengambil ruang yang tersisa. Tapi itu tidak akan terjadi kecuali saya secara khusus mengatur lebarnya.

Jadi saat ini, sudah diatur ke 96% yang terlihat OK sampai Anda benar-benar menekan layar - kemudian div kanan mendapat sedikit kelaparan dari ruang yang dibutuhkan.

Saya kira saya bisa membiarkannya apa adanya tetapi rasanya salah - seperti harus ada cara untuk mengatakan:

yang benar selalu sama; Anda di sebelah kiri - Anda mendapatkan semua yang tersisa

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

Gunakan flex-growproperti untuk membuat item fleksibel menghabiskan ruang kosong pada poros utama .

Properti ini akan memperluas item sebanyak mungkin, menyesuaikan panjang ke lingkungan yang dinamis, seperti ukuran layar atau penambahan / penghapusan item lain.

Contoh umum adalah flex-grow: 1atau, menggunakan properti singkatan flex: 1,.

Oleh karena itu, alih-alih width: 96%pada div Anda, gunakan flex: 1.

Kau menulis:

Jadi saat ini, sudah diatur ke 96% yang terlihat OK sampai Anda benar-benar menekan layar - kemudian div kanan mendapat sedikit kelaparan dari ruang yang dibutuhkan.

Squashing div tetap-lebar terkait dengan properti flex lain: flex-shrink

Secara default, item fleksibel diatur flex-shrink: 1yang memungkinkannya menyusut untuk mencegah meluapnya wadah.

Untuk menonaktifkan fitur ini gunakan flex-shrink: 0.

Untuk lebih jelasnya lihat The flex-shrinkFaktor bagian dalam jawabannya di sini:

• Apa perbedaan antara basis fleksibel dan lebar?

Pelajari lebih lanjut tentang pensejajaran fleksibel di sepanjang sumbu utama di sini:

• Di CSS Flexbox, mengapa tidak ada properti "justify-items" dan "justify-self"?

Pelajari lebih lanjut tentang penyejajaran fleksibel di sepanjang sumbu silang di sini:

• Bagaimana cara flex-wrap bekerja dengan align-self, align-items, dan align-content?

Pada dasarnya saya mencoba untuk mendapatkan kode saya untuk memiliki bagian tengah pada 'baris' untuk menyesuaikan secara otomatis dengan konten di kedua sisi (dalam kasus saya, pemisah garis putus-putus). Seperti yang disarankan @Michael_B, kuncinya digunakan display:flexpada wadah baris dan setidaknya memastikan wadah tengah Anda di baris memiliki flex-grownilai setidaknya 1 lebih tinggi dari wadah luar (jika wadah luar tidak memiliki flex-growsifat diterapkan, wadah tengah hanya membutuhkan 1 untuk flex-grow).

Berikut adalah pic dari apa yang saya coba lakukan dan contoh kode untuk bagaimana saya menyelesaikannya.

Sunting: Batas bawah putus-putus mungkin akan terlihat aneh tergantung pada bagaimana browser Anda menampilkannya. Saya pribadi merekomendasikan menggunakan lingkaran hitam SVG sebagai gambar latar belakang yang diulang, berukuran tepat dan diposisikan di bagian bawah wadah tengah. Akan menambahkan solusi alternatif ini ketika saya punya waktu.

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