Ion-scroll does not take up the content height


On my app there is a panel that shows / hides when you click a button which takes up about 300px of the screen.

Inside this panel I have included an ion-scroll. The problem is the content inside the ion-scroll wont show unless I specifically give it height in px. But that shouldn’t be the case. Theion-scroll should only take up the calculated height of it’s contents as the content inside this panel will get added or removed and the height should adjust accordingly.

<div class="myPanel" *ngIf="showPanel" style="max-height: 300px;">
  Some content inside the ion-scroll


Ion-scroll is meant to be an empty container, so you can add your own styles and create a scrollable container. You’ll want to set those styles on the ion-scroll it self, and not the div.myPanel


<ion-scroll style="max-height: 300px">

<ion-scroll style="height: auto">

None of those seem to work.

It has to be <ion-scroll style="height: 300px">.

But I can’t specify a fixed height. I want it to grow or shrink according to content. Is that not possible with ion-scroll?


I am also facing same problem. I have my landing page fixed and a bottom container for list which should be scrollable as per list grows.Its not working to me .


Can you share some code/markup?

Again, ion-scroll is meant to be an empty container for you to apply your own styles on.