Overflow-auto is not working inside group in accordian


#1

I am trying to use overflow-y: auto, if the content inside group exceeds the max-height that i gave.
I am able to scroll sometimes but few times I am unable to scroll.

I tried to find out the condition in which it is not working. But I was unable to trace.
Can anyone help in find out the issue. Please find ionic html and css.

Thanks a ton in advance.

HTML:

      <div ng-repeat="(filterName, filterValues) in filterData">
        <ion-item class="item-stable dsui-ionic-filtervalues"
                  ng-click="toggleGroup(filterName)"
                  ng-class="{active: isGroupShown(filterName)}">
          <span class="dsui-filter-ionic-lable">
          <i class="icon" ng-class="isGroupShown(filterName) ? 'ion-arrow-down-b' : 'ion-arrow-right-    b'"></i>
          &nbsp;
          {{filterName}}
          </span>
        </ion-item>
        <ul class="list filtertype-box">
          <li class="item item-checkbox item-accordion" ng-repeat="value in filterValues" ng-if="isGroupShown(filterName)" ng-click="value.ischecked=!value.ischecked" >
            {{value.value}}
          </li>
        </ul>
      </div>

CSS:

filtertype-box{
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}