Tại sao các mục flex không thu nhỏ kích thước nội dung trong quá khứ?

Tôi có 4 cột flexbox và mọi thứ đều hoạt động tốt, nhưng khi tôi thêm một số văn bản vào một cột và đặt nó thành một cỡ chữ lớn, nó làm cho cột rộng hơn so với thuộc tính flex.

Tôi đã thử sử dụng word-break: break-wordvà nó rất hữu ích, nhưng khi tôi thay đổi kích thước cột thành một chiều rộng rất nhỏ, các chữ cái trong văn bản được chia thành nhiều dòng (một chữ cái trên mỗi dòng), nhưng cột không có chiều rộng nhỏ hơn một chữ cái .

Xem video này (lúc bắt đầu, cột đầu tiên là nhỏ nhất, nhưng khi tôi thay đổi kích thước cửa sổ, đó là cột rộng nhất. Tôi chỉ muốn luôn luôn tôn trọng cài đặt flex; kích thước flex 1: 3: 4: 4)

Tôi biết, đặt kích thước phông chữ và đệm cột thành nhỏ hơn sẽ giúp ... nhưng có giải pháp nào khác không?

Tôi không thể sử dụng overflow-x: hidden.

Câu đố

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

Kích thước tối thiểu tự động của các mặt hàng Flex

Bạn đang gặp phải cài đặt mặc định flexbox.

Một mục flex không thể nhỏ hơn kích thước của nội dung dọc theo trục chính.

Mặc định là ...

• min-width: auto
• min-height: auto

... cho các mục flex theo hướng hàng và hướng cột tương ứng.

Bạn có thể ghi đè các mặc định này bằng cách đặt các mục flex thành:

• min-width: 0
• min-height: 0
• overflow: hidden(hoặc bất kỳ giá trị nào khác, ngoại trừ visible)

Đặc điểm kỹ thuật Flexbox

4.5. Kích thước tối thiểu tự động của các mặt hàng Flex

Để cung cấp kích thước tối thiểu mặc định hợp lý hơn cho các mục flex, thông số kỹ thuật này giới thiệu một autogiá trị mới là giá trị ban đầu của các thuộc tính min-widthvà min-heightđược xác định trong CSS 2.1.

Liên quan đến autogiá trị ...

Trên vật phẩm flex overflownằm visibletrong trục chính, khi được chỉ định trên thuộc tính kích thước tối thiểu trục chính của vật phẩm flex, chỉ định kích thước tối thiểu tự động . Nó khác tính toán 0.

Nói cách khác:

• Mặc định min-width: autovà min-height: autochỉ áp dụng khi overflowcó visible.
• Nếu overflowgiá trị là không visible, giá trị của thuộc tính kích thước tối thiểu là 0.
• Do đó, overflow: hiddencó thể là một thay thế cho min-width: 0và min-height: 0.

và ...

• Thuật toán định cỡ tối thiểu chỉ áp dụng trên trục chính.
• Ví dụ: một mục flex trong vùng chứa hướng hàng không được min-height: automặc định.
• Đối với một lời giải thích chi tiết hơn xem bài này:
  • kết xuất chiều rộng tối thiểu khác nhau theo hướng flex: hàng và hướng flex: cột

Bạn đã áp dụng độ rộng tối thiểu: 0 và mục vẫn không co lại?

Nested Flex Container

Nếu bạn đang xử lý các mục flex trên nhiều cấp độ của cấu trúc HTML, có thể cần phải ghi đè mặc định min-width: auto/ min-height: autotrên các mục ở cấp cao hơn.

Về cơ bản, một vật phẩm flex cấp cao hơn min-width: autocó thể ngăn ngừa co lại trên các vật phẩm được lồng bên dưới min-width: 0.

Ví dụ:

• Mục Flex không bị thu nhỏ hơn nội dung của nó
• Gắn con vào cha mẹ
• tài sản css không gian trắng đang tạo ra vấn đề với flex

Ghi chú kết xuất trình duyệt

• Chrome so với Firefox / Edge

  Kể từ ít nhất 2017, có vẻ như Chrome sẽ (1) quay trở lại min-width: 0/ min-height: 0mặc định hoặc (2) tự động áp dụng 0mặc định trong các tình huống nhất định dựa trên thuật toán bí ẩn. (Đây có thể là những gì họ gọi là can thiệp .) Kết quả là, nhiều người đang thấy bố cục của họ (đặc biệt là thanh cuộn mong muốn) hoạt động như mong đợi trong Chrome, nhưng không phải trong Firefox / Edge. Vấn đề này được đề cập chi tiết hơn ở đây: sự khác biệt về độ co giãn giữa Firefox và Chrome

• IE11

  Như đã lưu ý trong thông số kỹ thuật, autogiá trị cho min-widthvà min-heightthuộc tính là "mới". Điều này có nghĩa là một số trình duyệt vẫn có thể hiển thị 0giá trị theo mặc định, vì chúng đã triển khai bố cục flex trước khi giá trị được cập nhật và vì đó 0là giá trị ban đầu cho min-widthvà min-heighttrong CSS 2.1 . Một trình duyệt như vậy là IE11. Các trình duyệt khác đã cập nhật lên autogiá trị mới hơn như được xác định trong thông số flexbox .

Bản sửa đổi

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle