j'essaye de construire un site web qui a beaucoup de boîtes qui sont de même largeur et hauteur. Par exemple, j'ai une page qui a 2 boîtes de taille égale côte à côte.

la solution simple était de régler la largeur et la hauteur à 50vw. Cela fonctionne bien jusqu'à ce qu'il y ait une barre de rouleau. J'ai cherché sur Google pendant des heures et je ne comprends pas pourquoi sur terre vw et vh incluaient les barres de défilement dans le viewport.

voici un échantillon de mon numéro

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;   
}

Avis indésirables barre de défilement horizontale

https://jsfiddle.net/3z887swo/

Une solution possible serait d'utiliser des pourcentages pour les largeurs, mais vw pour la hauteur, mais il ne sera jamais parfait boîte qui n'est pas la pire chose dans le monde, mais pas encore idéal. Voici un échantillon

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

est-ce que quelqu'un sait pourquoi vw/vh inclut les barres de défilement dans le viewport? Aussi, si quelqu'un a une meilleure solution que la mienne, j'aimerais l'entendre. Je cherche une solution CSS pure. Je préfère ne pas avoir javascript.