grow - CSS3 Flexbox de altura completa y desbordamiento de aplicaciones

flexbox guia

Question

Tengo una aplicación que utiliza un diseño clásico de correo electrónico como el de abajo.

Lo he construido utilizando el nuevo modelo de flexbox CSS3 y funciona de manera brillante hasta que agrego la capacidad para que el usuario agregue dinámicamente nuevos elementos en el cuadro de carpetas. Hubiera esperado que el flexbox funcionara de tal manera que, siempre que quede espacio en el cuadro de carpetas, no comience a crecer en el cuadro de tareas que se encuentra debajo. Desafortunadamente esto no es lo que estoy viendo (en Chrome 17).

He construido un JSFiddle here que demuestra el problema. Simplemente haga clic en el enlace Agregar carpeta y verá crecer el cuadro de carpetas, a pesar de que le queda espacio suficiente para acomodar al nuevo hijo.

A la pregunta. ¿Cómo puedo construir dos cajas alineadas verticalmente usando flexbox de tal manera que una ocupe dos tercios de la altura disponible ( box-flex 2 ) y la otra una tercera ( box-flex 1 ) y que lo hagan de tal manera? que cuando se agrega nuevo contenido al primer cuadro, no comienza a crecer hasta que se queda sin espacio.

Answer 1

No puedo decir con seguridad si se trata de un error en el navegador o si de hecho es cómo se supone que funciona el modelo flex. Si así es como debería funcionar, ¡estoy de acuerdo en que no es exactamente intuitivo!

Encontré una solución alternativa envolviendo las listas en un div posicionado absolutamente con el desbordamiento configurado en automático. Esto permite que los cuadros flexibles mantengan sus estados originales y solo cambien cuando se recalcula todo el diseño frente al cambio de contenido.

Aquí está el marcado actualizado:

<section id="folders">
   <div class="dynamicList">
   <h2>Folders</h2> 
   <ul>
      <li>Folder 1</li>
      <li>Folder 2</li>
   </ul> 
   <a href="#" id="add">Add Folder</a>
   </div>      
</section>

Y el CSS actualizado:

#left #tasks,
#left #folders {
  position: relative;
}

.dynamicList {
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
}

Tuve tu violín aquí para la demostración: http://jsfiddle.net/MUWhy/4/

ACTUALIZAR:

Si desea que los encabezados permanezcan fijos y solo se desplacen los contenidos de la carpeta y las listas de tareas, entonces consideraría colocar los encabezados y los botones de agregar en sus propios cuadros de altura fija dentro de la división #left. Es un poco más marcado pero todavía bastante simple. No lo he probado en JSFiddle pero creo que esa sería la mejor ruta a seguir.

Answer 2

Prefiero esta solución a la de Jim, ya que no es tan fácil, ya que funcionará en cualquier flexbox en cualquier parte de la página. Jim solo puede trabajar en un cuadro en la parte superior izquierda de una página.

Resolví esto envolviendo la parte del cuadro de flexión que quería desplazar dentro de un div.scrollbox . Hice que los hijos directos de este div tengan una altura de 0, por lo que agregar elementos adicionales dentro de ella no afectaría el resto del diseño. También configuro su overflow-y en auto para que aparezca una barra de desplazamiento si sus hijos se extienden más allá de sus límites.

.scrollbox {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
}
.scrollbox > * {
    height: 0;
}

Tenga en cuenta que esto solo funcionará si el contenido extensible se coloca dentro de un elemento que contiene o elementos que contienen. En este ejemplo, los elementos li están contenidos dentro de un elemento ul contiene, por lo que funciona.

También tuve que hacer algunos cambios para conseguir que los 3 componentes del flexbox superior izquierdo se acomodaran correctamente, pero esto era específico de la aplicación.

#folders {
    display: -webkit-flex;
    -webkit-flex-flow: column;
}
#folders h2, #folders #add {
    -webkit-flex: 0 1 auto;
}

Yo bifurqué el jsfiddle anterior aquí: http://jsfiddle.net/FfZFG/ .

Answer 3

Recibí esta respuesta de mi otra pregunta, que es más o menos igual: https://.com/a/14964944/1604261

En lugar de la solución @LukeGT, que es una solución alternativa y no la solución para obtener el efecto, puede aplicar una altura al elemento donde desea ver un desplazamiento vertical.

Así que la mejor solución si quieres una altura mínima en el desplazamiento vertical:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

Si solo desea un desplazamiento vertical completo en caso de que no haya suficiente espacio para ver el artículo:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px; /* or height:0px */
}

Si no configura la altura (utilizando altura o min-altura ) no se establecerá el desplazamiento vertical. En todos los casos, incluso con altura: 0px; La altura calculada del elemento será diferente a cero.

Mi solución con el prefijo -webkit: http://jsfiddle.net/ch7n6/4/

Editar :

Dado que Firefox ahora es compatible con la especificación completa de flexbox, al eliminar el prefijo -webkit- vendor funcionará con todos los navegadores.