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



Answers

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

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

Question

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 dinámicos.

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;
}
<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>




Related