Columnas Flexbox de altura igual en Chrome

Tengo un diseño simple de 2 columnas y me gustaría usar Flexbox para obtener la misma altura:

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac elementum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus nec elementum erat. Suspendisse consequat ut metus ut cursus. Aenean et lectus id libero venenatis varius. Vivamus luctus ligula sit amet faucibus vulputate. Vestibulum tincidunt fringilla mauris, a vulputate magna egestas nec. Vivamus a odio ut nibh viverra fermentum.

CSS

 body { color: red; } .flex { display: flex; } aside { background: #000; height: 100%; } 

Esto está funcionando en Firefox pero no en Chrome: aquí hay un Fiddle

Intenté algo (incluidos los prefijos del proveedor) pero todavía no funciona.

Para crear dos columnas iguales usando Flexbox :

  • El contenedor principal se display: flex

  • Cada columna es creada por un div y obtienen flex: 1 para crecer / contraerse

Para estirar al niño de la primera columna:

  • La primera columna también se display: flex para que sus hijos puedan tener propiedades flexibles y crecer

  • El niño a un lado recibe flex: 1 y crecerá / contraerá

Esta es la guía más fácil de Flexbox que podrías pedir.

Compatibilidad con Flexbox: IE11 + y todos los navegadores modernos .

Ejemplo


Con Bootstrap : aquí está el violín de tu comentario con mis cambios agregados. El espacio de 1px a la izquierda se ha eliminado con div.flex.row:before, div.flex.row:after { display: none }

Respuesta relevante: elimine la brecha de 1 px al usar la pantalla: flex en Chrome


He eliminado todas las clases innecesarias para este ejemplo. Actualmente, ambas alturas de columna están determinadas por la columna más alta. También podría hacer que las columnas llenen toda la altura de la página con height: 100vh en el contenedor flexible. height: 100vh más información acerca de las unidades de vista aquí.

Compatibilidad de las unidades de visualización: las unidades de la vista son casi compatibles .

Para darle a una columna un ancho mayor, déle un valor flexible más grande. He cambiado la segunda columna en este ejemplo a flex: 3 y será más ancha.

 body { color: red; margin: 0; } .flex { display: flex; /*Should the columns span the entire height of the page? Use: height: 100vh;*/ } .column { flex: 1; } .column:first-child { display: flex; } .column:last-of-type { background: #000; flex: 3; } aside { flex: 1; background: #F90; } 
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac elementum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus nec elementum erat. Suspendisse consequat ut metus ut cursus. Aenean et lectus id libero venenatis varius. Vivamus luctus ligula sit amet faucibus vulputate. Vestibulum tincidunt fringilla mauris, a vulputate magna egestas nec. Vivamus a odio ut nibh viverra fermentum.

Nulla facilisi. Pellentesque nec libero leo. Duis porta ut neque vulputate blandit. In vel quam eu eros finibus feugiat ut in nulla. Morbi congue, tellus commodo euismod pulvinar, lacus dui fringilla lectus, in tempus mi nulla semper ex. Integer feugiat, lectus a facilisis rutrum, ex magna tincidunt ligula, in suscipit turpis lorem quis neque. Suspendisse dictum, nulla at aliquet cursus, magna tellus mattis purus, nec volutpat mauris nunc non neque. Mauris pretium mauris sed eros interdum lobortis. Aenean id vestibulum nisl. Praesent sit amet tempor nulla, consequat viverra ante. Maecenas eu pretium lacus, a consectetur sem. Proin viverra eget turpis eu condimentum. Donec et egestas enim. Maecenas fermentum auctor ligula, nec fringilla mi. Quisque hendrerit purus eget urna semper sodales.

Aquí está mi solución con un poco de Modernizr y jQuery (con el plugin Equalize )

http://jsfiddle.net/0Leymgbe/1/

Y esto es lo que lo hace funcionar:

 if ($().equalize) { // check if plugin is loaded $(window).on("resize", function () { (Modernizr.mq("(min-width: 768px)")) // if it's tablet or desktop... ? $('.row').equalize({reset: true}) // then equalize the columns : $('.row > div').css({'height': 'auto'}); //else reset to original height }).resize(); // trigger the resize on page load, too } 

En el cambio de tamaño de la ventana (y en la carga) Modernizr comprueba si la ventana gráfica es mayor que 768px (tabletas y escritorios): si es verdadero, jQuery ecualiza las columnas; si es falso (teléfonos inteligentes), se restauran las alturas originales

De ninguna manera (para mí) para que simplemente funcione con CSS3 flexbox