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

[Anonymous]

У меня проблема: контейнеры с установленной минимальной/максимальной шириной имеют обрезанный цвет фона и границу после горизонтальной прокрутки.
Не обращайте внимания на большое количество контейнеров, это просто упрощенный вариант. версия дерева компонентов React, с которой я имею дело:

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

.page-container {
width: 100%;
height: 100vh;
}

.bg-wrapper {
background-color: wheat;
min-width: 100%;
height: 100%;
}

.content-wrapper {
display: flex;
overflow: auto;
}

.container {
width: 100%;
height: 100%;
}

.bg-red {
background-color: red;
border: 1px solid yellow;
}

.bg-green {
background-color: green;
border: 1px solid yellow;
}

.box {
width: 100%;
margin: 0 auto;
min-width: 500px;
max-width: 1000px;
}

header {
display: flex;
justify-content: space-between;
width: 100%;
}

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

Test
Test





Content

Вот как это выглядит после горизонтальной прокрутки:


И это ожидаемое поведение:


Единственное исправление, которое я имею в виду, — это добавить display: inline- block в .content, но это создает другие проблемы, поэтому мне бы этого не хотелось

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