Убрать горизонтальный скролл в компоненет

Канат1 год в сервисе
Данные заказчика будут вам доступны после подачи заявки
11.10.2025

В React-приложении есть проблема с горизонтальным переполнением (overflow) в компоненте SessionActiveRequests, который вызывает появление глобального горизонтального скролла на странице.

Структура компонентов:

MainPage - основной контейнер с overflow-hidden

SessionActiveRequests - проблемный компонент, вызывает горизонтальное переполнение

Проблема:

Компонент SessionActiveRequests содержит список карточек активных запросов, который должен иметь внутренний горизонтальный скролл при переполнении. Однако вместо этого компонент расширяется за пределы родительского контейнера, создавая глобальный горизонтальный скролл на всей странице.

Текущая реализация:

Родительский контейнер имеет flex, min-w-0, overflow-x-hidden

SessionActiveRequests имеет внутренний div с overflow-x-auto

При большом количестве карточек или длинных заголовках происходит переполнение

Требуется:

Исправить горизонтальное переполнение так, чтобы SessionActiveRequests не выходил за пределы родительского контейнера

Сохранить внутренний горизонтальный скролл для списка карточек запросов

Убедиться, что кнопка "Запрос" остается видимой и не сжимается

Решение должно работать с Tailwind CSS

Стек:

Next.js

React

TypeScript

Tailwind CSS

Код компонентов прилагается.


Авторизуйтесь для подачи заявки

Заявки фрилансеров