Một flex item chứa text dài hoặc `overflow: hidden` mà không chịu co lại, làm tràn container. Nguyên nhân và cách sửa?

Nguyên nhân là min-width: auto — giá trị mặc định của flex item theo trục chính. Nó nói rằng item không được co nhỏ hơn kích thước nội dung tối thiểu (min-content), tức là chữ dài nhất hoặc bề rộng tối thiểu của phần tử con. flex-shrink: 1 vẫn hoạt động nhưng bị chặn ở ngưỡng đó, nên item đẩy rộng container.

Cách sửa: cho phép co xuống dưới min-content.

.item {
  flex: 1;
  min-width: 0;   /* trục chính là row */
}
.item.column-child {
  min-height: 0;  /* tương ứng khi flex-direction: column */
}

Dấu hiệu nhận biết: chỉ xảy ra khi con có nội dung không xuống dòng được (URL dài, white-space: nowrap, <table>, <pre>, hoặc chính nó là flex/grid container). Sau khi đặt min-width: 0 thì text-overflow: ellipsis mới ăn.

Lỗi tương đương ở Grid: dùng minmax(0, 1fr) thay cho 1fr.