Цвет фона обрезается при горизонтальной прокрутке ⇐ CSS

[Anonymous]

Я знаю, что существуют похожие темы, но ни одна из них не решает проблему. У меня есть следующий макет, в котором контент имеет минимальную/максимальную ширину, и если он достигает минимальной ширины, он должен стать контейнером с горизонтальной прокруткой. Все работает нормально, за исключением проблемы с цветом фона (то же самое и с границами) — как только я начинаю прокручивать, фон обрезается.
Я могу это исправить, сделав контейнер встроенным блок, но это создает другие проблемы, поэтому мне бы этого не хотелось. Есть ли другой разумный способ это исправить?

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

.container {
max-width: 1200px;
min-width: 700px;
}

.wrapper {
width: 100%;
overflow: hidden;
}

.table-wrapper {
width: 100%;
overflow-x: auto;
}

.td {
width: 300px;
}

.table {
width: 100%;
background: wheat;
}

.header {
width: 100%;
display: flex;
justify-content: space-between;
background-color: grey;
}

.header-content {
display: flex;
gap: 10px;
}

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

Logo
Item 1
Item 2










Column 1


Column 2


Column 3


Column 4


Column 5






Data 1
Data 2
Data 3
Data 4
Data 5


Data 1
Data 2
Data 3
Data 4
Data 5


Data 1
Data 2
Data 3
Data 4
Data 5


Data 1
Data 2
Data 3
Data 4
Data 5


Data 1
Data 2
Data 3
Data 4
Data 5

Подробнее здесь: https://stackoverflow.com/questions/787 ... tal-scroll