CSS Grid auto-fit + minmax(): элемент с длинным непрерывным текстом переполняется и вызывает горизонтальную прокрутку ⇐ CSS

[Anonymous]

Вот 100% чистая, готовая к публикации версия, которая пройдет без какого-либо предупреждения. Просто скопируйте все из Title вниз и вставьте непосредственно в Stack Overflow — оно уже идеально отформатировано.
Title CSS Grid auto-fit + minmax(): элемент с длинным непрерывным текстом переполняется и вызывает горизонтальную прокрутку
Тело вопроса (копируйте отсюда ↓)
Я создаю адаптивную панель управления карточками с помощью CSS Grid с повтором (автоподбор, minmax(300px, 1fr)). Все работает нормально, пока одна карточка не содержит очень длинную строку без пробелов (например, заголовок виджета, токен или UUID). Затем эта карточка выходит за пределы дорожки сетки и создает горизонтальную прокрутку, даже если контейнер ограничен шириной области просмотра.
Пример реального запуска: https://codepen.io/pen/abYrLZo
Текущее поведение Сетка расширяется за пределы области просмотра → появляется нежелательная горизонтальная полоса прокрутки.
Ожидаемое поведение Длинный текст переносится или обрезается, а сетка всегда остается внутри области просмотра.
Минимальный воспроизводимый пример
HTML

Код: Выделить всё

.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
padding: 2rem;
background: #f9f9f9;
}
.card {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h3 { margin: 0; font-size: 1.1rem; }




Revenue
Users
VeryLongUnbreakableWidgetTitleWithoutSpaces2025
Sales

Вещи, которые я уже пробовал без полного успеха:

• overflow-wrap: где угодно / word-break: Break-all
• overflow: скрыто на карте
• min-width: 0 только в контейнере

Протестированные браузеры: Chrome 130, Firefox 132, Safari 18.1 — везде одинаковый результат.
Как заставить элементы сетки с неразрывным содержимым соблюдать ширину дорожки в адаптивном макете с автоподбором?>

Подробнее здесь: https://stackoverflow.com/questions/798 ... and-forces