Рассчитайте ширину содержимого, отступов и границ отдельно
Зачем
Зачем это нужно
Найдите правило каскада, которое действительно задаёт проблемное значение
Проверьте переполнение длинного текста после исправления размеров
Вопросы
Частые вопросы
Как запросить разбор ширины блока CSS?
Разбери CSS: у родителя ширина содержимого 300px, у дочернего блока width:100%; padding:20px; border:1px solid; box-sizing:content-box; margin:0. Вычисли внешнюю ширину ребёнка, объясни переполнение и предложи вариант с border-box. Дай проверку без трансформаций и масштабирования, отдельно проверь длинное неразрывное слово. Код не отображай и не запускай.
Какие фрагменты нужны для разбора вёрстки?
Передайте разметку блока и родителя, связанные стили, браузер и ширину окна. Уберите личные данные, секреты и лишние стили. Сначала воспроизведите проблему на изолированном блоке, затем возвращайте окружающую раскладку.
Какую ширину ожидать при content-box и border-box?
При заданных условиях внешняя ширина ребёнка с content-box — 342px: 300 плюс 40 отступов и 2 границы. С border-box она должна стать 300px. Измерьте локально без трансформаций; отдельное переполнение текста требует своей проверки.
Исправляет ли overflow:hidden причину слишком широкого блока?
Он может лишь скрыть часть содержимого и обрезать фокус или текст. Сначала проверьте модель размеров, min-width и правила переноса. Без остальных стилей нейросеть не может подтвердить, какое правило победило в реальном каскаде.
Рядом
Соседние страницы каталога
Дальше — весь каталог задач: поиск по названию, темы и фильтры.