css - cómo hacer que funcionen los flexboxes anidados

google-chrome html

Question

Tengo un pequeño ejemplo de una configuración de flexbox anidada: http://jsfiddle.net/ThomasSpiessens/MUrPj/12/

<div class="box fullSize">
    <div class="boxHeader">HEADER</div>
    <div class="boxContent">
        <div class="box fullSize">
            <div class="boxHeader moregreen">INNER HEADER</div>
            <div class="boxContent red">CONTENT CONTENT CONTENT</div>
            <div class="boxFooter moreblue">INNER FOOTER</div>
        </div>
    </div>
    <div class="boxFooter">FOOTER</div>
</div>

En este ejemplo se aplica lo siguiente:

• Las clases ''box'' de CSS usan propiedades de flexbox en las que solo se le dice a boxContent que crezca. Para propiedades y valores de CSS específicos, verifique el violín.
• ''Tamaño completo'' solo establece el ancho y el alto en 100%.

Cuando verificas este problema con Firefox y Chrome, obtienes diferentes resultados. En Firefox hace lo que yo supongo que tiene que hacer, que es estirar el contenido interno de .boxContent. Sin embargo, en Chrome, el .boxContent interno no se estira.

¿Alguien tendría una idea de cómo hacer que el contenido se extienda también en Chrome? ¿Tal vez una propiedad específica de webkit que falta?

Answer 1

A menos que necesites ese div adicional, quítalo. A veces hay una diferencia entre la altura de un elemento y su longitud a lo largo del eje principal (orientación de la columna), lo que está causando cierta confusión aquí. Básicamente, parece que es más alto de lo que el navegador cree que es, por eso la height: 100% no funciona como usted espera (no estoy seguro de qué comportamiento es correcto en este caso).

Por la razón que sea, promover el elemento a un contenedor flexible funciona.

http://jsfiddle.net/MUrPj/14/

<div class="box fullSize">
    <div class="boxHeader">HEADER</div>
    <div class="boxContent box">
        <div class="boxHeader moregreen">INNER HEADER</div>
        <div class="boxContent red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
        <div class="boxFooter moreblue">INNER FOOTER</div>
    </div>
    <div class="boxFooter">FOOTER</div>
</div>

Answer 2

Esta pregunta se ha vinculado a un problema específico: ¿Cómo hacer que los elementos anidados en un cuadro flexible llenen toda la altura? La respuesta corta es:

Use la display:flex al niño y evite la height:100% . Aquí hay un ejemplo simplificado en codepen .

CourtDemone explicó bien (más here ):

De acuerdo con la especificación de flexbox, un valor de align-self:stretch (el valor predeterminado para un elemento flex''d) cambia solo el valor usado de la propiedad de tamaño cruzado de un elemento (en este caso, altura). Sin embargo, los porcentajes se calculan a partir del valor especificado de la propiedad de tamaño cruzado del padre, no de su valor utilizado.

Answer 3

He encontrado una solución sin quitar el extra-div.

Debe hacer que boxContent tenga una posición relativa y su caja contenedora sea absoluta.

Al adjuntar una clase css extra a la división interna:

<div class="boxContent">
    <div class="box fullSize innerBox">

y siguiendo css:

.boxContent {
  ...
    position: relative;
}
.innerBox{
    position: absolute;
    top: 0px;
    bottom: 0px;
}

Aquí está el jsfiddle actualizado: http://jsfiddle.net/MUrPj/223/

Esta pregunta es bastante antigua, pero podría ser útil para futuros visitantes.