¿Existe una solución única de CSS para que divs tenga la misma altura en una cuadrícula vertical?

Tengo un .parent div y dentro de eso tengo un número desconocido de .child divs. Necesito que los divs infantiles estén en una cuadrícula vertical y todos ellos deben tener la misma altura. Desafortunadamente, no puedo usar javascript para esto.

He intentado diferentes combinaciones de display: inline-block y float: left , pero no puedo lograr que los niños tengan la misma altura.

Puedo lograr la misma altura usando display: table-cell pero luego me encuentro con otro problema que los niños no se dividen en varias líneas si el ancho total excede el ancho del contenedor.

¿Hay una manera de hacer esto con css puro? Solo necesito compatibilidad con IE10 + si eso ayuda (¿flexbox?)

Puede usar un flexbox : vea cómo se ajustan automáticamente las alturas (debido a los elementos align-items:stretch , que son los valores predeterminados) cuando los divs secundarios se ajustan al cambiar el tamaño de la ventana.

 * { box-sizing: border-box; } body { margin: 0; } .wrapper { display: flex; flex-flow: row wrap; } .wrapper > div { border: 1px solid red; } 
 
some text here some text here
some text here
more text here
some text here
more text here and some more and some more
some text here
more text here
more text here

Sí, podrías usar flexbox.

 .parent{ display: flex; } .child{ flex:1; } 

Podrías intentar usar unidades de viewport.

Algo como esto podría funcionar:

 .child { height: 1vw; } 

Esto hará que los elementos secundarios tengan 1/100 del ancho de la ventana gráfica.

Para leer más sobre las unidades de viewport

Soporte de unidades de viewport