Flexbugs: El contenedor flexible anidado no calcula la altura correctamente en IE11

tendría que colocar rel en -vertical plus padding, y colocar la parte inferior en -static

o simplemente puede agregar min-height: 220px por .flex .flex para darle algo de altura

Hola @dubrod gracias por tu respuesta.

Desafortunadamente, lo que está hablando requiere un posicionamiento relativo y absoluto para elementos de ancho y alto conocidos. Estoy usando flexbox para admitir varios tipos de contenido, por lo que la altura no es un factor conocido. Tampoco es siempre el mismo contenido el que se alinea.

Esto funciona perfectamente en Chrome, Edge y Firefox. No parece funcionar en IE11. No entiendo por qué IE11 específicamente no cree que el primer hijo de .flex.-vertical no tenga una altura real y, por lo tanto, el contenido alineado flota hacia arriba.

Intenté implementar algo con margin-top: auto pero esto hace que la altura del contenedor sea mucho mayor de lo necesario.

Chrome, Edge y Firefox:

IE11:

Técnicamente, no se supone que Flexbox maneje casos como este (diseño 2D), Grid sí.

Probablemente podría hacerlo funcionar con Flexbox si reescribió su marcado para que sea de dos filas en lugar de tres columnas.

No estoy de acuerdo Phillip. La combinación de las reglas y la convención de flexbox (dimensiones de los medios que comparten una proporción común) ciertamente lo permite. Esto está utilizando conceptos de Flexbox para proporcionar columnas de igual altura con contenido alineado.

Y además, funciona en todos los navegadores de la forma que esperaba. Hay un único culpable, que es IE11 e inferior que no se adhiere a él. Por lo tanto, IE11 y versiones inferiores cumplen con el estándar, o las últimas versiones de hoja perenne de todos los fabricantes son incorrectas.

De cualquier manera, es un error.

Disculpa por ser una molestia.

Como dije antes, si quisiera hacerlo con Flexbox, debería hacerlo como dos filas en lugar de tres columnas. Si quisiera hacerlo como tres columnas (que es más intuitivo), entonces debería usar grid.

No digo que no sea una inconsistencia entre los navegadores. Ya has demostrado que lo es. Solo digo que los diseños 2D, circularmente dependientes como este se manejan más apropiadamente por cuadrícula.

Encontré esto a través de Google.

¡Yo también estoy totalmente en desacuerdo!

@markadrake, ¿encontró alguna solución?

Generalmente, no debe recurrir a width/height: 100% en flex; default align-items: stretch; generalmente hace que esto se extienda por usted.
En este caso concreto, puede usar margin-top: auto; (como @markadrake se mencionó anteriormente) para empujar la última columna al final de la fila:

https://codepen.io/myf/pen/BxdYGq

• funciona en IE11,
• no se utilizan elementos de envoltura adicionales,
• La única solución alternativa necesaria era max-width: 100% para el contenido de texto no envuelto desbordado en el elemento alineado center ( flexbug-2 ).

Gracias por tus comentarios @orgertot , hasta el día de hoy considero que esto es un error, pero encontramos una solución. El ejemplo de @myfonj es acertado. Proporciono otro ejemplo de CodePen solo porque adopto un enfoque diferente con la asignación de nombres y el uso de clases CSS. Es exactamente el mismo truco usando margin-top para alinear hacia abajo el último elemento.

https://codepen.io/markadrake/pen/ELwjqg