Я пытаюсь создать веб-сайт, который имеет множество ящиков одинаковой ширины и высоты. Например, у меня есть страница, которая имеет 2 одинаковых размера бок о бок.

простым решением было установить ширину и высоту до 50vw. Это отлично работает, пока не появится полоса прокрутки. Я гуглил часами и не могу понять, почему vw и vh включают полосы прокрутки как часть окна просмотра.

вот образец моего выпуск

HTML-код

<div class="container">
    <div class="box red"></div>
    <div class="box green"></div>
</div>
<div class="lotta-content"></div>

в CSS

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100vw;
}

.box {
    float: left;
    width: 50vw;
    height: 50vw;
}

.red {
    background-color: red;
}

.green {
    background-color: green;   
}

.lotta-content {
    height: 10000px;   
}

обратите внимание на нежелательную горизонтальную полосу прокрутки

https://jsfiddle.net/3z887swo/

одним из возможных решений было бы использовать проценты для ширины, но vw для высоты, но это никогда не будет идеальной коробкой, которая не является худшей вещью в мире, но все еще не идеальна. Вот образец

https://jsfiddle.net/3z887swo/1/

кто-нибудь знает, почему vw/vh включает полосы прокрутки как часть окна просмотра? Кроме того, если у кого-то есть лучшее решение, чем мое, я хотел бы его услышать. Я ищу чистое решение CSS. Я скорее не содержать JavaScript.