Set scroll y for md-tab-body div using AngularJS matrial - html

Question

I used angularjs material tabs here I need scroll for "md-tab-body" section, I have tried all the possibility from stack overflow but not working scroll.
<md-tabs md-enable-disconnect md-dynamic-height md-border-bottom md-selected='vm.tabIndex' id="wardName{{$index}}">
<md-tab ng-repeat="ward in vm.inpatientwards" ng-click="vm.loadWardview(ward._id)">
<md-tab-label>
<span translate id="ipwardId{{$index}}">{{ward.name}}</span>
</md-tab-label>
<md-tab-body>
<div style="margin:10px;" layout="row">
<md-grid-list flex>
<md-grid-tile ng-repeat="bed in vm.wardbeds" ng-click="vm.selectBed(bed)" id="wardBeds{{$index}}">
<md-grid-tile-header>
{{::bed.name}}
</md-grid-tile-header>
</md-grid-tile>
</md-grid-list>
</div>
</md-tab-body>
</md-tab>
</md-tabs>
The above code i used my application. I need help to set oveflow-y for body section.

Answer 1

You can do something like this may this help you in case if your scenario is like this:
<!-- if you have any div outside-->
<div style="height:100%">
<md-tabs md-enable-disconnect md-border-bottom md-selected='vm.tabIndex' id="wardName{{$index}}" class="helloHeight">
<md-tab ng-repeat="ward in vm.inpatientwards" ng-click="vm.loadWardview(ward._id)">
<md-tab-label>
<span translate id="ipwardId{{$index}}">{{ward.name}}</span>
</md-tab-label>
<md-tab-body>
<!-- try to inspect this div-->
<div style="margin:10px;height:100%;overflow-y: auto;" layout="row">
<md-grid-list flex>
<md-grid-tile ng-repeat="bed in vm.wardbeds" ng-click="vm.selectBed(bed)" id="wardBeds{{$index}}">
<md-grid-tile-header >
{{::bed.name}}
</md-grid-tile-header>
</md-grid-tile>
</md-grid-list>
</div>
</md-tab-body>
</md-tab>
.helloHeight{
height:100%;
}
And not sure as not tested this code.