Estoy tratando de crear un diseño flexible en CSS3 con 3 cajas apiladas una sobre otra. Las cajas son hermanos y por lo tanto tienen el mismo elemento padre. La altura de la primera caja debe ajustarse a su contenido. La altura de las dos casillas siguientes se crecer para adaptarse a sus respectivos contenidos hasta que estén a punto de desbordarse de sus padres. En ese caso, se debe reducir para que no se desborde.

El problema es que no puedo entender cómo evitar que uno de la reducción de las cajas de convertirse aplastado si su contenido es pequeño en relación al resto de reducción caja. Quiero esas cajas para reducirlos a un cierto punto en que no se encoge más – digamos que el equivalente de dos filas de texto por ejemplo. Configuración de min-width no es una opción, porque no quiero que las cajas para ser más alto que su contenido en caso de que el contenido es sólo una fila, por ejemplo. Si alguna de las casillas ha llegado hasta el punto de no reducir más y los padres no pueden mantenerlos sin que se desborde, el padre deberá obtener una barra de desplazamiento.

No sé el contenido de antemano, así que el diseño tiene que ser dinámica. Quiero resolver esto sólo con CSS, si es posible.

He aquí un ejemplo del problema donde caja3 es demasiado pequeño:

CSS:

p {
    margin: 0;
}
.container, .box {
    border: 1px solid black;
}
.box {
    background-color: white;
    margin: 1em;
    overflow: auto;
}
#container {
    background-color: yellow;
    display: flex;
    flex-direction: column;
    height: 15em;
    overflow: auto;
}
#box1 {
    flex: 0 0 auto;
}
#box2 {
}
#box3 {
}

HTML:

<div id="container" class="container">
    <div id="box1" class="box">
        <p></p>
    </div>
    <div id="box2" class="box">
        <p>◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼</p>
    </div>
    <div id="box3" class="box">
        <p>◼◻◻</p>
        <p>◼◼◻</p>
        <p>◼◼◼</p>
    </div>
</div>

InformationsquelleAutor Spomf | 2013-11-05

1 Comentario

  1. 36

    SI entiendo tu pregunta correctamente, el flex-reducir a la propiedad debe ser lo que usted está buscando.

    Set #box1 a flex-shrink: 0

    Set #box2 a flex-shrink: 1

    Set #caja3 a flex-shrink: 1

    • No tengo acceso a un navegador que soporte flex-cajas en el momento, pero creo que box2 y caja3 han flex-shrink conjunto para 1 por defecto. Eso significa que se va a reducir hasta sus alturas son 0, que es el problema.
    • Prueba primero antes de especular. Flexbox es bastante complicado al principio.
    • Ahora puedo confirmar que flex-shrink es 1 por defecto (al menos en Chrome y Firefox), por lo que su solución no funciona, lamentablemente.
    • Echa un vistazo a este pen: codepen.io/anon/pen/zLFix
    • Gracias, pero no es exactamente lo que usted propone en su respuesta? Como escribí, no funciona 🙁 caja3 es todavía ser aplastados.
    • Acaba de cambiar el flex de reducción para cada uno de los cuadros. Si desea caja3 para mantener dos líneas, establecer box2 a la flexión-compresión: 2;.
    • Es posible que funcione en el ejemplo, pero es sólo un ejemplo. No funciona en el caso general, ya que no conozco el contenido de las cajas de antemano. Para aclarar, necesito un límite a la reducción a fin de que las cajas no demasiado estrecho.
    • Eso es exactamente lo flex-shrink hace, se limita la cantidad que un flex elemento puede ser reducido. Echa un vistazo a este bolígrafo con algunas de texto falso. También, para el futuro, preguntas y mantener la buena voluntad, asegúrese de utilizar un ejemplo relevante. Usted no desea que los usuarios a resolver un ejemplo que no funciona para lo que usted necesita para.
    • No, flex-shrink no limitar la cantidad de un flex elemento puede ser reducido. Es un factor que determina el elemento que se aplica a deberá reducir en relación a sus hermanos. El ejemplo que he proporcionado con la pregunta era solo para ilustrar el caso general, estoy tratando de resolver. Yo no puedo dar un ejemplo para cada caso, naturalmente.
    • Cromo 38 y funciona para mí — flex-grow estaba aplastando a los otros (fijo) elemento y ajuste de flex-shrink a 0 trabajó como guardia en contra de trituración. Gracias por la sugerencia!

Dejar respuesta

Please enter your comment!
Please enter your name here