Переполненное тело Flexbox по точной ширине полосы прокрутки

Question

У меня проблема в том, что я сильно бьюсь головой. Не могу понять это ради своей жизни ..

Я создаю собственную тему WP, и у меня возникают некоторые проблемы с элементами flexbox, переполняющими ширину тела, и создаю горизонтальную прокрутку. (см. прикрепленное изображение)

Только образы flexbox переполняют контейнер. Я проверил это, запустив небольшой фрагмент кода, чтобы вернуть элементы шире, чем область просмотра.

Мои исследования показывают, что это происходит потому, что ширина области просмотра рассчитывается перед полосой прокрутки, и я думаю, что это вызывая эти проблемы.

Я могу подтвердить, что эта проблема не возникает на страницах без полос прокрутки.

Я пытался скрыть переполнение х, но, как вы можете догадаться, это не делает все правильно по центру.

Вот некоторые блоки кода из затронутых элементов:

header#header {
    width: 100vw;
    height: calc(100vh - 98px);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-animation: bgcolor 20s infinite;
    animation: bgcolor 10s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

.menu {
    position: relative;
    display: flex;
    width: 100vw;
    background-color: white;
    justify-content: space-between;
    padding: 25px;
    font-size: 3em;
}

.widget_mc4wp_form_widget {
    width: 100vw;
    padding: 25px;
    border-top: 5px dashed blue;
    border-bottom: 5px dashed blue;
}

div#copyright {
    display: flex;
    text-align: center;
    flex-direction: column;
}

Я использую firefox 74.0, такая же проблема возникает в chrome и safari.

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

Спасибо вы !!

Answer 1

Ладно, похоже, это исправило замену vw на% в любых css правилах, использующих 100vw.

(например, width: 100% против width: 100vw).

Я предполагаю, что vw рассчитывается до того, как ширина тела была, что вызывало переполнение этих элементов из тела.

Я подтвердил это, проверив ширину элементов, установленных на 100vw (1920px), против элементов, которые были рассчитаны с использованием 100% (1905px). Ширина полосы прокрутки составляет ровно 15 пикселей в Firefox.