Chrome / Safari no llena el 100% de la altura del padre flexible

235

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

Cada niño debe llenar la altura del padre y tener texto alineado en el medio.

El número de hijos es aleatorio, así que tengo que trabajar con valores dinámicos.

Div .containercontiene un número aleatorio de hijos ( .item) que siempre tienen que llenar la altura del padre. Para lograr eso usé flexbox.

Para hacer enlaces con texto alineado al medio, estoy usando la display: table-celltécnica. Pero el uso de pantallas de mesa requiere el uso de una altura del 100%.

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

¿Hay alguna solución para este problema?
¿O hay una técnica diferente para hacer que todos .itemllenen la altura del padre con texto vertical alineado al medio?

Ejemplo aquí jsFiddle, debe 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>

Expandir fragmento

css google-chrome webkit flexbox Ricardo Castañeda
fuente

1

ahora se ha solucionado - bugs.chromium.org/p/chromium/issues/detail?id=426898

vsync

3

Esto no es específicamente relevante para OP, pero podría ser relevante para los googlers que aterrizan aquí para "la altura absoluta de la pantalla de safari 100% no funciona" o algo similar. Tengo un elemento como este dentro de un contenedor flexible y tuve que especificar top:0y left:0hacer que aparezca como se esperaba.

AlexMA

1

@vsync aún no se ha solucionado: stackoverflow.com/questions/46226298/…

TylerH

408

Solución

Use contenedores flexibles anidados.

Deshágase de las alturas porcentuales. Deshágase de las propiedades de la tabla. Deshacerse de vertical-align. Evitar el posicionamiento absoluto. Solo quédate con flexbox hasta el final.

Aplique display: flexal elemento flexible ( .item), convirtiéndolo en un contenedor flexible. Esto se establece automáticamente align-items: stretch, lo que le dice al niño ( .item-inner) que expanda la altura completa del padre.

Importante: elimine las alturas especificadas de los elementos flexibles para que este método funcione. Si un niño tiene una altura especificada (p height: 100%. Ej. ), Ignorará la align-items: stretchllegada del padre. Para que el stretchvalor predeterminado funcione, la altura del niño debe calcular auto (explicación completa ).

Pruebe esto (sin cambios en HTML):

Mostrar fragmento de código

.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}

<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>

Expandir fragmento

jsFiddle demo

Explicación

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

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

10.5 Altura del contenido: la heightpropiedad

porcentaje
Especifica un porcentaje de altura. 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á en una posición absoluta, 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 elemento secundario en flujo, el elemento primario debe tener una altura establecida.

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

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

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

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

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

Además, Chrome aceptará flex-growcomo referencia principal adecuada si se usa junto conflex-basis (cualquier valor numérico funciona ( autono lo hará), incluido flex-basis: 0). Al escribir estas líneas, sin embargo, esta solución falla en Safari.

Mostrar fragmento de código

#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;
}

<div id="outer">
  <div id="middle">
    <div id="inner">
      INNER
    </div>
  </div>
</div>

Expandir fragmento

Cuatro soluciones

1. Especifique una altura en todos los elementos principales

Una solución confiable para varios navegadores es especificar una altura en todos los elementos principales. Esto evita la falta de enlaces, que los navegadores basados en Webkit consideran una violación de la especificación.

Tenga en cuenta que min-heighty max-heightno son aceptables. Debe ser la heightpropiedad.

Más detalles aquí: trabajar con la heightpropiedad CSS y los valores de porcentaje

2. Posicionamiento relativo y absoluto de CSS

Aplicar position: relativea los padres y position: absoluteal niño.

Tamaño del niño con height: 100%y width: 100%, o utilizar las propiedades de desplazamiento: top: 0, right: 0, bottom: 0, left: 0.

Con posicionamiento absoluto, la altura porcentual funciona sin una altura especificada en el padre.

3. Eliminar contenedores HTML innecesarios (recomendado)

¿Hay necesidad de dos contenedores alrededor button? ¿Por qué no eliminar .itemo .item-inner, o ambos? Aunque los buttonelementos a veces fallan como contenedores flexibles , pueden ser elementos flexibles. Considere crear buttonun hijo de .containero .itemy eliminar el marcado gratuito.

Aquí hay un ejemplo:

Mostrar fragmento de código

.container {
    height: 20em;
    display: flex;
    flex-direction: column;
    border: 5px solid black
}

a {
    flex: 1;
    background: orange;
    border-bottom: 1px solid white;
    display: flex;                   /* nested flex container (for aligning text) */
    align-items: center;             /* center text vertically */
    justify-content: center;         /* center text horizontally */
}

<div class="container">
    <a>Button</a>
    <a>Button</a>
    <a>Button</a>
</div>

Expandir fragmento

4. Contenedores flexibles anidados (recomendado)

Deshágase de las alturas porcentuales. Deshágase de las propiedades de la tabla. Deshacerse de vertical-align. Evitar el posicionamiento absoluto. Solo quédate con flexbox hasta el final.

Aplique display: flexal elemento flexible ( .item), convirtiéndolo en un contenedor flexible. Esto se establece automáticamente align-items: stretch, lo que le dice al niño ( .item-inner) que expanda la altura completa del padre.

Importante: elimine las alturas especificadas de los elementos flexibles para que este método funcione. Si un niño tiene una altura especificada (p height: 100%. Ej. ), Ignorará la align-items: stretchllegada del padre. Para que el stretchvalor predeterminado funcione, la altura del niño debe calcular auto (explicación completa ).

Pruebe esto (sin cambios en HTML):

Mostrar fragmento de código

.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}

<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>

Expandir fragmento

jsFiddle

Michael Benjamin
fuente

3

Solucioné

solo un comentario tomado del enlace de explicación de esta gran publicación: "alinear elementos: estiramiento" hace que los niños flexibles se expandan a través del eje transversal del contenedor, es decir, estirar a los niños a la altura, el contenedor flexible debe tener dirección flexible como fila

littlewhywhat

3

Puedo confirmar que el uso de contenedores flexibles anidados funciona mejor. Usamos flexbox de manera inconsistente en nuestro menú. En lugar de usar flex: 1 y display: flex en contenedores primarios, usamos height: 100% en algunos lugares. Todo funcionó como se esperaba después de reemplazar las definiciones correspondientes. ¡Gracias @Michael_B por la pista! :)

flocbit

1

@JamesHarrington, CSS ha crecido con el tiempo y es complejo ;-)

DerMike

Cada solución debe ser una respuesta diferente. ¿Cómo puedo votar en una solución específica de esta manera?

Jp_

14

Solución: eliminar height: 100%en .item-inner y agregar display: flexen .item

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

nghiepit
fuente

Gracias, esto me ayudó. ¿Los niños flexibles se estiran automáticamente a la altura de su contenedor? ¿Es por esto que esto funciona?

Reece Kenney el

@ReeceKenney, sí, a tus preguntas. Esto se explica en mi respuesta. Ver solución # 4.

Michael Benjamin

10

Especificar un atributo flex para el contenedor funcionó para mí:

.container {
    flex: 0 0 auto;
}

Esto asegura que la altura esté establecida y que tampoco crezca.

huseyin39
fuente

6

Para Safari móvil Hay una solución de navegador. necesita agregar -webkit-box para dispositivos iOS.

Ex.

display: flex;
display: -webkit-box;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
align-items: stretch;

Si está utilizando la align-items: stretch;propiedad para el elemento primario, elimine la height : 100%del elemento secundario.

Narasinghe
fuente

2

He tenido un problema similar en iOS 8, 9 y 10 y la información anterior no pudo solucionarlo, sin embargo, descubrí una solución después de un día de trabajar en esto. De acuerdo, no funcionará para todos, pero en mi caso mis artículos se apilaron en una columna y tenían una altura de 0 cuando debería haber sido altura de contenido. Cambiar el CSS para que sea fila y ajuste solucionó el problema. Esto solo funciona si tiene un solo elemento y están apilados, pero como me llevó un día descubrirlo, ¡pensé que debería compartir mi solución!

.wrapper {
    flex-direction: column; // <-- Remove this line
    flex-direction: row; // <-- replace it with
    flex-wrap: wrap; // <-- Add wrapping
}

.item {
    width: 100%;
}

Diseñador023
fuente

0

Tuve un error similar, pero mientras usaba un número fijo para la altura y no un porcentaje. También era un contenedor flexible dentro del cuerpo (que no tiene una altura especificada). Parecía que en Safari, mi contenedor flexible tenía una altura de 9px por alguna razón, pero en todos los demás navegadores mostraba la altura correcta de 100px especificada en la hoja de estilo.

Logré que funcionara agregando las propiedades heighty min-heighta la clase CSS.

Lo siguiente funcionó para mí en Safari 13.0.4 y Chrome 79.0.3945.130:

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100px;
  height: 100px;
}

¡Espero que esto ayude!

Carlton Lindsay
fuente

Chrome / Safari no llena el 100% de la altura del padre flexible

Respuestas:

Solución

Explicación

Cuatro soluciones

jsFiddle