Chrome / Safari no se completa al 100% de la altura del elemento flexible

Quiero tener un menú vertical con una altura específica.

Cada niño debe llenar el alto del padre y tener texto alineado a la mitad.

La cantidad de niños es aleatoria, así que tengo que trabajar con valores dynamics.

El .container Div contiene un número aleatorio de elementos .item ( .item ) que siempre deben llenar la altura del elemento principal. Para lograr eso utilicé flexbox.

Para hacer enlaces con el texto alineado al centro, estoy usando display: table-cell técnica de display: table-cell . Pero el uso de pantallas de tabla requiere el uso de una altura del 100%.

Mi problema es que .item-inner { height: 100% } no funciona en webkit (Chrome).

  1. ¿Hay alguna solución para este problema?
  2. ¿O hay una técnica diferente para hacer que todos los .item llenen la altura del elemento primario con el texto vertical alineado al centro?

Ejemplo aquí jsFiddle, debería verse en Firefox y Chrome

 .container { height: 20em; display: flex; flex-direction: column; border: 5px solid black } .item { flex: 1; border-bottom: 1px solid white; } .item-inner { height: 100%; width: 100%; display: table; } a { background: orange; display: table-cell; vertical-align: middle; } 
  

El problema

Mi problema es que .item-inner { height: 100% } no funciona en webkit (Chrome).

No está funcionando porque está utilizando la altura del porcentaje de una manera que no se ajusta a la implementación tradicional de la especificación.

10.5 Altura del contenido: la propiedad de height

porcentaje
Especifica una altura de porcentaje. El porcentaje se calcula con respecto a la altura del bloque que contiene la caja generada. Si la altura del bloque contenedor no se especifica explícitamente y este elemento no está completamente posicionado, el valor se calcula en auto .

auto
La altura depende de los valores de otras propiedades.

En otras palabras, para que la altura porcentual funcione en un hijo en flujo, el padre debe tener una altura establecida.

En su código, el contenedor de nivel superior tiene una altura definida: .container { height: 20em; } .container { height: 20em; }

El contenedor de tercer nivel tiene una altura definida: .item-inner { height: 100%; } .item-inner { height: 100%; }

Pero entre ellos, el contenedor de segundo nivel – .itemno tiene una altura definida. Webkit lo ve como un eslabón perdido.

.item-inner le dice a Chrome: dame la height: 100% . Chrome busca al padre ( .item ) como referencia y responde: ¿ 100% de qué? No veo nada (ignorando la regla de flex: 1 que está allí). Como resultado, aplica height: auto (altura del contenido), de acuerdo con la especificación.

Firefox, por otro lado, ahora acepta la altura de flexión de un padre como referencia para la altura porcentual del niño. IE11 y Edge también aceptan alturas de flexión.

Además, Chrome aceptará flex-grow como una referencia parental adecuada si se utiliza junto con flex-basis (cualquier valor funciona, incluida flex-basis: 0 ). Al escribir estas líneas, sin embargo, esta solución falla en Safari.

 #outer { display: flex; flex-direction: column; height: 300px; background-color: white; border: 1px solid red; } #middle { flex-grow: 1; flex-basis: 1px; background-color: yellow; } #inner { height: 100%; background-color: lightgreen; } 
 
INNER

Solución: elimine la height: 100% en .item-inner y agregue display: flex in .item

Demostración: https://codepen.io/tronghiep92/pen/NvzVoo