CSSĐổi 1fr thành minmax(0, 1fr).
1fr thực chất là viết tắt của minmax(auto, 1fr). Phần auto đặt sàn tối thiểu bằng min-content của ô, nên khi bên trong có nội dung không ngắt được, track buộc phải rộng ra và cả grid tràn ngang khỏi container.
css
/* tràn khi cột phải chứa nội dung dài */
.layout { display: grid; grid-template-columns: 240px 1fr; }
/* an toàn */
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); }minmax(min, max) định nghĩa track co giãn giữa hai mốc. Đặt min = 0 nghĩa là cho phép track nhỏ hơn nội dung, khi đó overflow: auto hay text-overflow: ellipsis bên trong mới có tác dụng.
Các dạng hay dùng: minmax(200px, 1fr) (cột không hẹp hơn 200px), minmax(min-content, 320px), minmax(auto, 60ch) cho cột văn bản. Đây là cùng một lớp lỗi với min-width: auto của flex item.