Unexpected outcome using ion-content and ion-scroll in nested routing


I tried to nest routing, and I got the following observations from trial and error:

  1. Use <ion-pane> at level 1.
  2. When using <ion-content> at level 2, there is a gap between header and content
  3. When using <ion-scroll> at level 2, it does not work correctly.

The codepan is here

Am I doing something wrong here?
I’m quite new to Ionic and web technologies in general. I apologize if they are dumb questions…

Thanks in advance.