Unable to scroll div in a modal - html

Question

I have an AngularJS app that uses same modals to ask questions. In one modal I am able to scroll the contents but in another one, generated the same way, I am not. All scrolling works fine on desktops but not on mobile (both Safari and Chrome). I have read a lot of others posts about this problem but I haven't been to solve the problem...
This modal does scroll:
<div class="mod mod--info" ng-init="displayInfo('order')" style="overflow: scroll;">
<div class="mod__loading" ng-show="!orderInfo">
<fa name="spinner" spin></fa>
<small>{{ 'modal.info.fetch' | translate }}</small>
</div>
<div class="mod__list">
<ul>
<li class="mod__box" ng-repeat="batch in orderInfo track by batch.batch_id" ng-show="batch.order_lines.length > 0">
<span>
<label ng-show="batch['full_name']">{{ 'modal.info.batch' | translate }} {{ batch['created_at'] | amDateFormat:'DD-MM-YYYY HH:mm:ss' }}</label>
<small>{{ 'modal.info.by' | translate }} {{ batch['full_name'] }}</small>
</span>
<ul>
<li ng-repeat="line in batch.order_lines">
<label ng-bind-html="fixedLine(line)"></label>
<ul class="indent" ng-show="line.additions.length > 0">
<li ng-repeat="addition in line.additions">
<label>{{ addition.quantity }} x {{ addition.product }}</label>
</li>
</ul>
<ul class="indent" ng-show="line.menu_items.length > 0">
<li ng-repeat="menu_item in line.menu_items">
<label>{{ menu_item.quantity }} x {{ menu_item.product }}</label>
<ul class="indent" ng-show="menu_item.additions.length > 0">
<li ng-repeat="menu_item_addition in menu_item.additions">
<label>{{ menu_item_addition.quantity }} x {{ menu_item_addition.product }}</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="button button--danger" hm-tap="close()">
<fa name="times"></fa> {{ 'general.close' | translate }}
</div>
This one does not:
<div class="mod">
<div class="mod__list" ng-show="$index == step" ng-repeat="q in questions track by $index">
<div class="mod__heading">
<h4>
{{ product['receipt_name'] }}
<small>
{{ 'modal.question.sequal' | translate }} {{ $index + 1 }}
</small>
</h4>
</div>
<div class="mod__list-item-container">
<div class="mod__list-item mod__list-item--dark-blue ignore-nth-child" ng-repeat="a in q['answers']" hm-tap="add(a['product'])">
<span>
{{ a['product']['display_name'] }}
<span ng-show="a['price'] > 0" ng-bind="formatPrice(a['price'])"></span>
</span>
</div>
</div>
<div class="mod__list-item mod__list-item--pink" hm-tap="cancel()" ng-show="parser.toBoolean(q.required)">Annuleren</div>
<div class="mod__list-item mod__list-item--pink" hm-tap="next()" ng-hide="parser.toBoolean(q.required)">
{{ 'modal.question.skip' | translate }} <fa name="share"></fa>
</div>
</div>
</div>
The CSS for the mod__list-item-container:
&__list-item-container {
width: 100%;
max-height: 70vh;
overflow: scroll;
//overflow-y: scroll;
//-webkit-overflow-scrolling: touch;
}
Does anyone have an idea?