Nested ion-scroll problem

ionic-v1
1

I have a side menu application that has a floating div tag of information in an ion-content that i would like to keep at the top. I am trying to nest an ion-scroll inside of it so that I can scroll a list. However, I cannot get the ion-scroll to scroll all the way to the bottom, it snaps back up after the last couple of rows. If I remove the top div tag, it works fine. Here is my code, any help would be appreciated:

<ion-view title='<img class="title-image" src="img/banners/.png" />'>
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
    </ion-nav-buttons>
    <ion-content scroll="false">
         <div>
             Information i want at top
        </div>
        <ion-scroll style="height:100% !important"
            <ion-list>
                <ion-item ng-repeat="item in items">
                    <h2>{{item}}</h2>
                </ion-item>
            </ion-list>
        </ion-scroll>
    </ion-content>
</ion-view>
2

Hey man, did you ever find a solution to this problem? I am having the same problem in my app.

3

Replying for posterity.
I followed this post and managed to solve it using CSS. The position: absolute and top/bottom were indispensable for figuring this out.

I applied the css class to the ion-scroll and then set the css. The result ended up being something very similar to the following.

.recipeeScroll {
  position: absolute !important;
  top:160px;
  bottom: 0;
  width: 100%;
}
<ion-content scroll="false">
  <div id="customHeader" >
  ...
  </div>    
  <ion-scroll class='recipeeScroll'>
    <div ng-repeat="recipee in recipees">{{recipee.name}}</div>
  </ion-scroll>
</ion-content>