Tengo un pequeño ejemplo de un anidada flexbox de instalación: 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:

  • CSS ‘cuadro’ de las clases de uso flexbox propiedades en las cuales sólo el boxContent se le dice a crecer. Para determinadas propiedades de CSS y valores, por favor, compruebe el violín.
  • ‘integral’ solo establece la anchura y altura de hasta el 100%.

Cuando la comprobación de este violín con Firefox y Chrome se obtienen diferentes resultados. En Firefox se hace lo que yo daría por sentado que tiene que hacer, que se extiende en el interior .boxContent. En Chrome sin embargo, el interior .boxContent no se estiran.

Alguien tiene una idea de cómo hacer que el contenido de estiramiento en Chrome ? quizás un determinado webkit propiedad, que es el que falta ?

OriginalEl autor Thomas | 2013-09-05

3 Comentarios

  1. 18

    A menos que usted necesidad que div adicional, eliminarlo. A veces hay una diferencia entre la altura de un elemento y su longitud a lo largo de la eje principal (columna de orientación), que está causando un poco de confusión aquí. Básicamente, se se ve como es más alto que el navegador cree que es, que es la razón por la height: 100% no funciona como se espera (no estoy seguro de cual es el comportamiento correcto en este caso).

    Por cualquier razón, la promoción de los elemento a un contenedor flex obras.

    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>
    Esto funcionó para mí. No se pudo obtener el contenedor div para estirar bajo ninguna circunstancia. Se deshizo de él y funcionaba bien. Algo molesto.

    OriginalEl autor cimmanon

  2. 13

    Esta pregunta ha sido vinculado por un problema específico: Cómo hacer que los elementos anidados en un flex cuadro de llenar toda la altura? La respuesta corta es:

    Uso display:flex en el niño y evitar height:100%. Aquí está una ejemplo simplificado en codepen.

    CourtDemone expliqué bien (más aquí):

    De acuerdo a la flexbox especificación, un align-self:stretch valor (el valor predeterminado para un flex gustaría elemento) cambia sólo la utilizado valor de un elemento transversal del tamaño de la propiedad (en este caso, la altura). Porcentajes sin embargo se calcula a partir de la especificado valor de los padres de la cruz de tamaño de la propiedad, no se utiliza el valor.

    a mí me funcionó, div contenedor (flex) había filas, filas había dos elementos o células. primera elem es de ancho fijo, el segundo fue para rellenar cualquiera que sea el ancho restante. display:flex en fila hizo la magia.

    OriginalEl autor ldwg

  3. 3

    He encontrado una solución sin la eliminación de la extra-div.

    Que usted necesita para hacer boxContent relación de posición y de su caja contenedora absoluta.

    Con la fijación de un extra de clase css para el interior div:

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

    y el siguiente css:

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

    aquí está la versión actualizada de jsfiddle: http://jsfiddle.net/MUrPj/223/

    Esta pregunta es bastante vieja, pero esto podría ser útil para los futuros visitantes

    Gracias hombre, la mejor solución en mi caso, donde los elementos anidados deben estar en línea con los bloques

    OriginalEl autor user3200478

Dejar respuesta

Please enter your comment!
Please enter your name here