Почему полоса прокрутки появляется на дисплее Chrome, искажая мой CSS, но НЕ на виртуальном дисплее инструментов разрабо ⇐ CSS

[Anonymous]

Проблема: два элемента html, каждый шириной 50vw и расположенные рядом, занимают 100% ширины виртуальной области просмотра Chrome в инструменте разработки (как и следовало ожидать!), Но НЕ в полноэкранном режиме Chrome. они накладываются друг на друга, а справа появляется полоса прокрутки. То же самое с Firefox или Chrome. Проверьте мой код, потому что я не вижу ошибки..

Настройка: body {overflow: скрытый;} решает проблему (принудительно), но предотвращает прокрутку, или уменьшение высоты до 100 пикселей решает проблему, которая непрактична (эта часть меня действительно сбивает с толку). Однако, как вы понимаете, это неподходящие решения для моего проекта веб-приложения.

Похоже, что Chrome добавляет полосу прокрутки, которая не требуется, но для меня это не имеет смысла. Пожалуйста помоги. Я не знаю, как это исправить. Это похоже на то, что браузер рассчитывает, потребуется ли прокрутка, если элементы были сложены, и если «истина», он добавляет полосу прокрутки, даже если элементы изначально не были сложены. Этот расчет происходит в полноэкранном браузере, но не в dev. инструменты виртуального дисплея. Кажется, он это делает, но я этого не понимаю.

edit: я обнаружил, что использование двух элементов 50% вместо двух элементов 50vw решает эту проблему. Если кто-нибудь знает почему, буду признателен за вашу информацию.

Мой код:
тело { поле: 0 пикселей 0 пикселей; отступ: 0 пикселей 0 пикселей; переполнение: ; /*переполнение: скрыто решает проблему. */ } #leftSect { поле: 0 пикселей 0 пикселей; отступ: 0 пикселей 0 пикселей; ширина: 50мм; высота: 400 пикселей; /*высота: 100 пикселей решает проблему*/ отображение: встроенный блок; плыть налево; цвет фона: красный; граница: 1 пиксель, сплошная черная; размер коробки: граница-коробка; } #rightSect { поле: 0 пикселей 0 пикселей; отступ: 0 пикселей 0 пикселей; ширина: 50мм; высота: 400 пикселей; /*высота: 100 пикселей решает проблему*/ отображение: встроенный блок; плыть налево; цвет фона: синий; граница: 1 пиксель, сплошная черная; размер коробки: граница-коробка; }