¿Cómo hacer un pie de página adhesivo y aún así poder hacer contenido de flexbox desplazable?

Estoy tratando de lograr el pie de página adhesivo (versión flexbox). Sin embargo, no puedo encontrar una solución que funcione si también quiero tener la capacidad de tener contenido desplazable dentro de un flex: 1 div (que requiere que los padres tengan height: 100% ).

Aquí hay un violín para demostrar el problema: https://jsfiddle.net/gfaqLh42/6/

enter image description here

Como puede ver, el área roja es desplazable (con una min-height: 300px ). Observe que el pie de página está fuera de la pantalla a pesar de que la ventana gráfica no es menor que el área azul de min-altura del área roja.

¿Hay alguna manera de hacer un pie de página adhesivo y seguir utilizando flexbox flex: 1 con contenido desplazable ?

Actualizar

Aquí hay otra imagen para representar el otro gran problema que enfrento al tratar de hacer que esto funcione:

enter image description here

¿Hay alguna manera de hacer un pie de página adhesivo y seguir utilizando flexbox flex: 1 con contenido desplazable?

Sí, y lo que necesita es usar Flexbox hasta el final.

Entonces, en lugar de usar min-height / height en article-1 / card , cambie su CSS a esto:

 .article-1 { flex: 1; display: flex; min-height: 0; /* added, ia Firefox need this */ } .card { overflow: auto; } 

Tenga en cuenta que también elimino algunas propiedades que no son necesarias, principalmente porque estaban configuradas por defecto, y agregué algunas. Y por qué la necesidad de min-width , está bien explicada aquí:

  • ¿Por qué los elementos de flexión no se reducen después del tamaño del contenido?

Fiddle actualizado

Fragmento de stack

 html, body{ height: 100%; margin: 0; font-weight: bold; } .header { position: absolute; height: 40px; background-color: grey; z-index: 1; width: 100%; } .content { display: flex; flex-direction: column; height: 100%; padding-top: 40px; box-sizing: border-box; /* added */ } .wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; /* added, ia Firefox need this */ } .container { flex: 1; padding: 10px; box-sizing: border-box; /* added */ display: flex; flex-direction: column; min-height: 0; /* added, ia Firefox need this */ } .article-1 { flex: 1; display: flex; min-height: 0; /* added, ia Firefox need this */ } .card { overflow: auto; } .card-text { height: 2000px; width: 2000px; background-color: red; } .article-2 { flex: none; height: 40px; background-color: blue; } .footer { position: relative; height: 40px; background-color: grey; } 
 
Header
scrollable flex: 1 div
1. scrollable
2. scrollable
3. scrollable
4. etc...
flex: none div