¿Cómo puedo crear cuadros de igual ancho/alto que se ajusten al ancho de la pantalla? [duplicate]

Estoy tratando de construir un sitio web que tenga muchos cuadros que tengan el mismo ancho y alto. Por ejemplo, tengo una página que tiene dos cuadros del mismo tamaño uno al lado del otro.

La solución simple fue establecer el ancho y la altura en 50vw. Esto funciona muy bien hasta que hay una barra de desplazamiento. He buscado en Google durante horas y no puedo entender por qué diablos vw y vh incluirían las barras de desplazamiento como parte de la ventana gráfica.

Aquí hay una muestra de mi problema

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

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

Observe la barra de desplazamiento horizontal no deseada.

Una posible solución sería usar porcentajes para los anchos, pero vw para la altura, pero nunca será una caja perfecta que no es lo peor del mundo, pero tampoco es ideal. Aquí hay una muestra:

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
}

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

.red {
    background-color: red;
}

.green {
    background-color: green;   
}

.lotta-content {
    height: 10000px;   
}
}

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

¿Por qué vw/vh incluye barras de desplazamiento como parte de la ventana gráfica? ¿Existe una solución mejor que la mía? Estoy buscando una solución CSS pura. Prefiero no tener JavaScript.

Una solución alternativa simple (simplista) es mantener la barra de desplazamiento siempre alrededor y solucionarlo.

html,body {margin:0;padding:0}
html{overflow-y:scroll}

(usar overflow-x para un diseño que utiliza vh)

Sería conveniente si las unidades de ventana gráfica no incluir causar barras de desplazamiento, pero es el tamaño de visualización (pantalla) después de todo. Sin embargo, eche un vistazo a esta solución con un pseudo elemento:

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Hace un cuadrado en tu ejemplo también:

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

.box {
    float: left;
    width: 50%;
}

.box::before {
    content: "";
    display: block;
    padding-top: 100%;
}

Editar: si alguien se pregunta por qué funciona esto (el relleno vertical responde al ancho del elemento original) … así es como se define en la especificación:

El porcentaje se calcula con respecto al ancho del bloque contenedor de la caja generada, incluso para ‘padding-top’ y ‘padding-bottom’.

http://www.w3.org/TR/CSS2/box.html#padding-properties

Después de encontrar mi propia respuesta, creo que necesitaba un poco de refinamiento. La ambigüedad semántica es la razón por la que reemplacé la palabra “incluir” con “causa” en la parte superior. Porque es más el hecho de que vw las unidades solo tienen en cuenta el tamaño de la ventana gráfica – no incluyendo cualquier barra de desplazamiento y causando desbordamiento y una barra de desplazamiento en la otra dirección cuando se agrega su ancho a 100vw (haciendo que el espacio total que se necesita sea la ventana gráfica más el ancho de la barra de desplazamiento, excediendo la pantalla).

Al igual que con la pregunta aquí, la mejor manera de manejar vw Es probable que las unidades las eviten si puede porque simplemente no son muy compatibles con el navegador de escritorio (que no tiene barras de desplazamiento superpuestas).

Edité la idea que incluía una variable CSS, por esperanzadora que pareciera.

Esta pregunta es antigua y se respondió bien arriba, por lo que me centraré en obtener el ancho de la barra de desplazamiento para luego usarlo para calcular el ancho de los elementos, ya que es por eso que llegué aquí. Esperemos que esto ayude a otros Googlers.

Una solución CSS descuidada

Empecé a escribir la solución CSS pura basada en el cálculo a continuación, pero una vez que comienzas a tener en cuenta los elementos dentro de los contenedores de ancho variable, especialmente cuando no son el 100% del ancho visible, el calc las funciones comienzan a volverse intrincadas e ilegibles.

Para quien le interese, este calc en el elemento raíz (<html>) (asumiendo que el documento es de ancho completo y no más ancho) le dará el ancho de la barra de desplazamiento o 0 cuando no se muestra ninguna barra de desplazamiento.

calc( 100vw - 100% );

Una solución robusta

Personalmente, no lucharía contra CSS en este caso. Utilice la herramienta adecuada para el trabajo:

(function get_scrollbar_width() {

    // Get window width including scrollbar.
    const withScrollBar = window.innerWidth;
    
    // Get window width excluding scrollbar.
    const noScrollBar = document.querySelector("html").getBoundingClientRect().width;
    
    // Calc the scrollbar width.
    scrollbarWidth = parseInt((withScrollBar - noScrollBar), 10) + 'px';

    // Update the CSS custom property value.
    let root = document.documentElement;
    root.style.setProperty('--scrollbar', scrollbarWidth);
    
})();

:root {
    --scrollbar: 0px;
}

body {
    overflow: scroll;
}

.demobox {
    display: grid;
    grid: auto / var(--scrollbar) max-content;
    width: calc(10em + var(--scrollbar) );
    margin: 0 auto;
}

.demobox > div {
    background: red;
}

.demobox > p {
    padding: 1em;
    text-align: center;
    width: 10em;
}

<div class="demobox">
    <div></div>
    <p>
        This red grid cell represents the scrollbar width as set
        on the CSS custom property by the JavaScript function.
    </p>
</div>

html { overflow-x: hidden; }

parece funcionar

Tengo una solución aquí. Incluirá el ancho de la barra de desplazamiento cuando use 100vw, ¿verdad? así que si no podemos hacerlo bien, entonces podemos quitar la barra de desplazamiento, hacerla invisible. así: ocultar la barra de desplazamiento, pero sin dejar de poder desplazarse