Làm cho div điền còn lại * ngang * không gian trong flexbox

Tôi có 2 divs cạnh nhau trong một flexbox. Tay phải phải luôn có cùng chiều rộng và tôi muốn tay trái chỉ lấy khoảng trống còn lại. Nhưng nó sẽ không trừ khi tôi đặc biệt thiết lập chiều rộng của nó.

Vì vậy, tại thời điểm này, nó được đặt thành 96%, có vẻ ổn cho đến khi bạn thực sự bóp màn hình - sau đó div bên tay phải bị thiếu một chút không gian cần thiết.

Tôi đoán tôi có thể để nó như vậy nhưng nó cảm thấy sai - giống như phải có một cách để nói:

cái đúng luôn luôn giống nhau; bạn ở bên trái - bạn nhận được mọi thứ còn lại

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

Sử dụng thuộc flex-growtính để làm cho một mục flex tiêu thụ không gian trống trên trục chính .

Thuộc tính này sẽ mở rộng mục càng nhiều càng tốt, điều chỉnh độ dài cho các môi trường động, chẳng hạn như định cỡ lại màn hình hoặc thêm / xóa các mục khác.

Một ví dụ phổ biến là flex-grow: 1hoặc, sử dụng thuộc tính tốc ký , flex: 1.

Do đó, thay vì width: 96%trên div của bạn, sử dụng flex: 1.

Bạn đã viết:

Vì vậy, tại thời điểm này, nó được đặt thành 96%, có vẻ ổn cho đến khi bạn thực sự bóp màn hình - sau đó div bên tay phải bị thiếu một chút không gian cần thiết.

Việc nén div div có chiều rộng cố định có liên quan đến một thuộc tính flex khác: flex-shrink

Theo mặc định, các mục flex được đặt thành flex-shrink: 1cho phép chúng co lại để tránh tràn container.

Để vô hiệu hóa tính năng này sử dụng flex-shrink: 0.

Để biết thêm chi tiết, xem Các flex-shrinkyếu tố phần trong câu trả lời ở đây:

• Sự khác biệt giữa cơ sở flex và chiều rộng là gì?

Tìm hiểu thêm về căn chỉnh flex dọc theo trục chính tại đây:

• Trong CSS Flexbox, tại sao không có thuộc tính "justify-items" và "justify-self"?

Tìm hiểu thêm về căn chỉnh flex dọc theo trục chéo tại đây:

• Làm thế nào để flex-quấn hoạt động với align-self, align-item và align-content?

Về cơ bản, tôi đã cố gắng để mã của mình có một phần giữa trên một 'hàng' để tự động điều chỉnh nội dung ở cả hai bên (trong trường hợp của tôi, một dấu phân cách dòng chấm). Giống như @Michael_B đã đề xuất, khóa đang sử dụng display:flextrên bộ chứa hàng và ít nhất là đảm bảo bộ chứa giữa của bạn trên hàng có flex-growgiá trị cao hơn ít nhất 1 so với bộ chứa bên ngoài (nếu bộ chứa bên ngoài không có bất kỳ flex-growthuộc tính nào được áp dụng, bộ chứa ở giữa chỉ cần 1 cho flex-grow).

Đây là một bức ảnh về những gì tôi đã cố gắng làm và lấy mẫu mã cho cách tôi giải quyết nó.

Chỉnh sửa: Đường viền dưới cùng có thể sẽ trông kỳ lạ tùy thuộc vào cách trình duyệt của bạn hiển thị nó. Cá nhân tôi khuyên bạn nên sử dụng một SVG vòng tròn màu đen làm hình nền lặp đi lặp lại, có kích thước phù hợp và được đặt ở dưới cùng của thùng chứa ở giữa. Sẽ thêm giải pháp thay thế này khi tôi có thời gian.

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