CSS не применяется к дополнительной части overflow-x: ⇐ CSS

[Anonymous]

введите здесь описание изображения
У меня возникла ошибка, как на картинке, когда у меня много файлов . Чтобы сделать код отзывчивым, он имеет overflow-x: auto, но дополнительная часть не применяет CSS-код .
Мой код JSX:

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

Thời gian xuất phát
Thời gian đến

Địa điểm xuất phát

Địa điểm đến
Thông tin người bay
Thông tin vé
Trạng thái
Hủy vé

И их много.
Мой CSS-код:

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

.profile-flights-list {
margin: 1rem 1rem 1rem 1rem;
border: 1px solid #ccc;
border-radius: 10px;
font-size: 0.9rem;
overflow-x: auto;
}

.profile-flights-list > .profile-flights-list-row:first-child {
background-color: #cce1b1;
font-weight: 700;
}
.profile-flights-list-row {
display: grid;
grid-template-columns: minmax(5rem, 2fr) minmax(5rem, 2fr) minmax(5rem, 2fr) minmax(5rem, 2fr) minmax(15rem, 6fr) minmax(7.5rem, 3fr) minmax(5rem, 2fr) minmax(2.5rem, 1fr);
align-items: center;
border-bottom: 1px solid #ccc;
text-align: center;
flex-shrink: 0;
}

.profile-flights-list-row:last-child {
border-bottom: none;
}

Спасибо за чтение! Если вам нужна дополнительная информация, дайте мне знать!
У меня не так уж много опыта в кодировании интерфейса для веб-сайтов, поэтому я пока не придумал никакого решения.

Подробнее здесь: https://stackoverflow.com/questions/792 ... overflow-x