html - ejemplos - flexbox overflow scroll

Flexbox y scroll vertical en una aplicación de altura completa usando NEWER api flexbox

Question

Quiero usar una aplicación de altura completa usando flexbox. Encontré lo que quería usando el viejo flexbox (pantalla: caja y otras cosas) en este enlace: aplicación de altura completa CSS3 Flexbox y desbordamiento

Esta es una solución correcta para la versión anterior de las propiedades de flexbox css.

Si quiero probar el uso de las propiedades de flexbox más nuevas, trataré de usar la segunda solución en el mismo enlace, pero "piratear" flexbox usando un contenedor con altura: 0px; Hace mostrar un desplazamiento vertical.

No me gusta mucho porque introduce otros problemas y es más una solución que una solución.

He preparado un jsfiddle con un ejemplo base: http://jsfiddle.net/ch7n6/

#container {
display: -webkit-flex;
-webkit-flex-direction: column;
height: 100%;
}
#container article {
-webkit-flex: 1 1 auto;
overflow-y: scroll;
}

Es una "web html de altura completa" y el pie de página está en la parte inferior debido a la flexbox del elemento de contenido. Le sugiero que mueva la barra entre el código CSS y el resultado para simular una altura diferente.

Answer 1

Editor de especificaciones de Flexbox aquí.

Este es un uso recomendado de flexbox, pero hay algunas cosas que debe ajustar para obtener un mejor comportamiento.

• No use prefijos. Un flexbox no prefijado está bien soportado en la mayoría de los navegadores. Siempre comience con no prefijado, y solo agregue prefijos si es necesario para respaldarlo.

• Debido a que su encabezado y pie de página no están diseñados para flexionarse, ambos deberían tener flex: none; establecer en ellos. En este momento tiene un comportamiento similar debido a algunos efectos de superposición, pero no debe confiar en eso a menos que quiera confundirse accidentalmente más tarde. (El valor predeterminado es flex:0 1 auto , por lo que comienzan en su altura automática y pueden encoger pero no crecer, pero también son overflow:visible de forma predeterminada, lo que activa su min-height:auto predeterminada min-height:auto para evitar que se encojan en absoluto .Si alguna vez establece un overflow en ellos, el comportamiento de min-height:auto cambios min-height:auto (cambiando a cero en lugar de min-content) y de repente se verán aplastados por el elemento extra-alto <article> .

• También puede simplificar la <article> flex , simplemente configure flex: 1; y serás bueno para ir. Intente seguir con los valores comunes en https://drafts.csswg.org/css-flexbox/#flex-common menos que tenga una buena razón para hacer algo más complicado: son más fáciles de leer y cubren la mayoría de los comportamientos. querrás invocar.

Answer 2

Gracias a cimmanon que me dieron la respuesta.

La solución está configurando una altura para el elemento vertical desplazable. Por ejemplo:

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

El elemento tendrá altura porque flexbox lo recalcula a menos que quieras una altura mínima para que puedas usar height: 100px; que es exactamente lo mismo que: min-height: 100px;

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

Entonces, 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 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;
}

El código final: http://jsfiddle.net/ch7n6/867/

Answer 3

La especificación actual dice esto con respecto a flex: 1 1 auto :

Dimensiona el artículo en función de las propiedades de width / height , pero los hace completamente flexibles, de modo que absorben cualquier espacio libre a lo largo del eje principal. Si todos los elementos son flex: auto , flex: initial o flex: none , cualquier espacio libre positivo después de que los artículos hayan sido dimensionados se distribuirá uniformemente a los elementos con flex: auto .

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

Me parece que si dices que un elemento tiene 100 px de altura, se trata más como un tamaño "sugerido", no como absoluto. Debido a que se le permite contraerse y crecer, ocupa tanto espacio como se le permite. Es por eso que añadir esta línea a su elemento "principal" funciona: height: 0 (o cualquier otro número pequeño).