Картка товару виглядає акуратно, доки редактор не додає довгу назву або посилання без пробілів. Після цього текстова колонка розтягується, кнопка зникає за краєм, а на телефоні з’являється горизонтальне прокручування. Зменшення ширини контейнера часто не допомагає: причина може лежати в мінімальному розмірі самого flex-елемента. Це окрема задача CSS, яку варто розбирати через правила компонування, а не через випадкове приховування зайвих пікселів.
Розглянемо умовну картку з двома сусідніми частинами: невеликою ілюстрацією та колонкою опису. Назви класів у прикладах навчальні, їх потрібно адаптувати до власної розмітки. Мета ремонту — залишити текст, ілюстрацію та дію доступними, коли вміст довший за очікуваний. Такий підхід корисний для каталогів, списків документів і адміністративних інтерфейсів.
Чому дозволене стискання ще не гарантує вузьку колонку
Flexbox розподіляє доступний простір між дочірніми елементами. Проте можливість стискатися не означає відсутність нижньої межі. У звичайному горизонтальному flex-рядку автоматична мінімальна ширина текстового елемента може залежати від його вмісту. Довгий нерозривний фрагмент утворює межу, нижче якої колонка не хоче зменшуватися. Тому зміна лише flex-shrink може залишити переповнення незмінним.
Відкрийте інструменти розробника й виберіть саме колонку опису, а не весь рядок. Подивіться її обчислені width, min-width, flex-basis і властивості перенесення тексту. Порівняйте рамку елемента з рамкою батьківського контейнера. Тимчасово вимкніть фіксовані ширини та перевірте, чи проблема зникає. Так ви відокремите мінімальний розмір від інших причин: великих відступів, незменшуваного зображення або навмисного white-space: nowrap.
Не кожне переповнення спричинене автоматичним мінімумом. Якщо сам контейнер ширший за екран, ремонт дочірньої колонки не змінить геометрію батька. Спочатку визначте перший елемент, чия рамка виходить за доступну область. Це допомагає уникнути глобальних правил, які маскують кілька незалежних помилок одночасно.
Точкова зміна на правильному рівні вкладеності
Для текстової частини нашої картки спробуйте правило .card__body { min-width: 0; }. Воно дозволяє цій частині ставати вужчою за її автоматичний мінімальний розмір. Це не універсальний рецепт для всього сайту: застосовуйте правило до flex-елемента, який справді повинен стискатися. Не додавайте його бездумно до всіх кнопок, іконок або контейнерів.
Вкладені компоненти потребують окремої уваги. Колонка може містити ще один flex-рядок із заголовком і позначкою статусу. Тоді зовнішня частина вже стискається, але внутрішній заголовок продовжує розпирати рядок. Перевірте кожен рівень від проблемного тексту до головної картки. Змінюйте по одному правилу й одразу дивіться, який елемент перестав утримувати зайву ширину.
Якщо ілюстрація має зберігати розмір, зафіксуйте її роль окремо від текстової частини. Не змушуйте всі сусідні елементи стискатися однаково лише для зникнення смуги прокручування. Результат може формально вкладатися в екран, але втратити читабельність або зручність натискання. Розподіл простору має відповідати призначенню кожної частини.
Довгі рядки потребують власної політики
Після зміни мінімальної ширини текст усе ще може виступати за рамку. Дозволити колонці стискатися та дозволити тексту переноситися — різні рішення. Для довгих адрес чи ідентифікаторів розгляньте overflow-wrap: anywhere у відповідному текстовому блоці. Звичайний опис, назва товару та технічний код можуть мати різні вимоги, тому правила краще прив’язувати до типу вмісту.
Для короткого заголовка іноді доречне скорочення з трикрапкою, але лише якщо повний текст доступний іншим зрозумілим способом. Не покладайтеся виключно на підказку при наведенні: на сенсорному пристрої її може бути незручно отримати. Для адреси документа корисніше дозволити перенесення, ніж приховати частину, за якою користувач розрізняє файли.
Не починайте ремонт із overflow-x: hidden на всій сторінці. Це здатне прибрати видиму смугу прокручування, залишивши кнопку або текст за межами доступної області. Так само не зменшуйте шрифт лише заради вміщення проблемного рядка. Спершу визначте очікувану поведінку: перенесення, локальне прокручування для коду чи контрольоване скорочення назви.
Окремо перевірте, чи контент із редактора не містить власних вбудованих стилів. Вони можуть задавати ширину незалежно від класів компонента. Прибирайте тільки підтверджений конфлікт, зберігаючи необхідне форматування таблиць або прикладів коду. Перевірку проводьте спочатку на тестовій копії, а не на активній сторінці магазину.
Набір вмісту, який доводить придатність рішення
Збережіть кілька тестових варіантів компонента: звичайний опис, довгу адресу без пробілів, багаторядковий заголовок та порожній додатковий текст. Додайте випадок із довгою назвою кнопки. Перегляньте картку на вузькому екрані та зі збільшеним масштабом браузера. Пройдіть клавіатурою всі інтерактивні елементи й переконайтеся, що фокус не опиняється в прихованій області.
Виправлення слід перевіряти не лише на одному записі каталогу. Відкрийте сусідні компоненти, які використовують той самий CSS-клас, та порівняйте їхню поведінку. У коментарі до зміни поясніть, який елемент має стискатися і чому. Для подальшого супроводу можна включити ці приклади в процес технічної підтримки сайту, щоб наступна правка не повернула переповнення.
Докладне визначення автоматичної мінімальної ширини наведене в документації MDN про min-width. Висновок простий: спочатку знайдіть елемент, що утримує ширину, потім окремо вирішіть долю довгого тексту. Якщо компоненти сайту поводяться непередбачувано після наповнення, AriZone може допомогти розібрати конкретну розмітку та підготувати локальні виправлення без втрати доступного вмісту.
Залиште коментар