Chrome / Safari não está preenchendo 100% de altura do pai flexível

Eu quero ter um menu vertical com uma altura específica.

Cada criança deve preencher a altura do pai e ter o texto alinhado pelo meio.

O número de filhos é random, então tenho que trabalhar com valores dynamics.

.container contém um número random de filhos ( .item ) que sempre precisam preencher a altura do pai. Para conseguir isso, usei o flexbox.

Para fazer links com texto alinhado ao meio, estou usando display: table-cell técnica display: table-cell . Mas usar exibições de tabela requer o uso de uma altura de 100%.

Meu problema é que .item-inner { height: 100% } não está funcionando no webkit (Chrome).

  1. Existe uma correção para esse problema?
  2. Ou existe uma técnica diferente para fazer todos os .item preencherem a altura do pai com o texto vertical alinhado ao meio?

Exemplo aqui jsFiddle, deve ser visto no Firefox e no 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; } 
  

    O problema

    Meu problema é que .item-inner { height: 100% } não está funcionando no webkit (Chrome).

    Não está funcionando porque você está usando porcentagem de altura de uma forma que não está de acordo com a implementação tradicional da especificação.

    10.5 Altura do conteúdo: a propriedade height

    percentagem
    Especifica uma altura de porcentagem. A porcentagem é calculada com relação à altura do bloco que contém a checkbox gerada. Se a altura do bloco que contém não for especificada explicitamente e este elemento não estiver posicionado de forma absoluta, o valor será computado como auto .

    auto
    A altura depende dos valores de outras propriedades.

    Em outras palavras, para que a porcentagem de altura funcione em um filho in-flow, o pai deve ter uma altura definida.

    Em seu código, o contêiner de nível superior tem uma altura definida: .container { height: 20em; } .container { height: 20em; }

    O contêiner de terceiro nível tem uma altura definida: .item-inner { height: 100%; } .item-inner { height: 100%; }

    Mas entre eles, o contêiner de segundo nível – .itemnão tem uma altura definida. Webkit vê isso como um elo perdido.

    .item-inner está dizendo Chrome: me dê height: 100% . O Chrome olha para o pai ( .item ) para referência e responde: 100% de quê? Eu não vejo nada (ignorando a regra de flex: 1 que está lá). Como resultado, aplica-se height: auto (altura do conteúdo), de acordo com a especificação.

    O Firefox, por outro lado, agora aceita a altura flexível dos pais como referência para a altura percentual da criança. IE11 e Edge aceitam alturas flexíveis também.

    Além disso, o Chrome aceitará flex-grow como uma referência pai adequada se usado em conjunto com flex-basis (qualquer valor funciona, incluindo flex-basis: 0 ). No momento em que escrevo, no entanto, essa solução falha no 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

    Solução: Remova a height: 100% no interior .item e adicione a display: flex em .item

    Demonstração: https://codepen.io/tronghiep92/pen/NvzVoo