Tengo algunos problemas en una aplicación que estoy desarrollando en la que el cliente quiere tener algunas áreas fijas que contienen pestañas y filtros, y un área principal de desplazamiento infinito que contiene los datos correspondientes que se seleccionan en las pestañas y se filtran:

Probé diferentes opciones para lograr este diseño y obtuve algunos problemas en cada caso:

• Envuelva toda el área principal (amarillo + azul) en un contenido de iones no desplazable, haga que el área azul sea desplazable, cubriendo el resto de la pantalla con flexbox. Problemas: el desplazamiento infinito no funciona, ya que necesita contenido de iones como área de desplazamiento. Tengo la sensación de que el diseño no es muy sólido y podría actuar de forma inesperada. Además, desde la perspectiva de UX, la mayoría de los usuarios están acostumbrados a poder desplazarse en toda la pantalla y no solo en un área.
• Use la etiqueta de contenido de iones alrededor del área azul. Problemas: el encabezado y el pie de página están fuera de lugar
• Lo que creo que podría ser la mejor manera de hacerlo: envuelva el contenido de iones alrededor del área amarilla y azul y haga que el área amarilla flote (ranura = "fijo"). Problemas: no quiero establecer un margen superior fijo en el área azul, ya que esta altura puede cambiar según el dispositivo que se utilice. Tal vez esto podría hacerse mediante programación, pero prefiero hacerlo solo con CSS

Además, tal vez sea posible incluir el área amarilla en el encabezado de iones, pero lo encuentro muy inflexible y difícil de estructurar. En este caso, los encabezados de las pestañas estarían en ion-header, mientras que el contenido en ion-content, lo que parece bastante extraño desde mi punto de vista.

¿Alguna idea sobre cómo lograr esto?