How to make md Content scrollable in Angular material Design - html

Question

I am using ui-view in md-content to display a list but its getting overflow i want list in md-content should be scrollable
here is my index.html
<div layout-lt-lg="row" class="screen-bg">
<div flex-lt-lg="100">
<!--header-->
<md-toolbar class="app-bar-bg" style="background-color: #9013fe;">
<div class="status-bar-bg"></div>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Settings">
<!--<md-icon md-svg-icon="app/images/back1.svg"></md-icon>-->
</md-button>
<h2>
<span></span>
</h2>
<span flex=""></span>
<md-button class="md-icon-button" aria-label="Favorite">
<!--<md-icon md-svg-icon="app/images/a.svg"></md-icon>-->
</md-button>
</div>
</md-toolbar>
<!--content-->
<div>
<md-content>
<ui-view></ui-view>
</md-content>
</div>
</div>
</div>
here is my template
<md-list flex>
<md-list-item class="md-3-line" ng-repeat="broadCast in broadCasts">
<div class="md-list-item-text" layout="column" >
<h3>{{broadCast.name}}</h3>
<h3>{{broadCast.phone}}</h3>
</div>
</md-list-item>
</md-list>

Answer 1

To make the list scrollable:
Add a class to md-list.
<md-list class="make-scrollable" flex>
<md-list-item class="md-3-line" ng-repeat="broadCast in broadCasts">
<div class="md-list-item-text" layout="column">
<h3>{{broadCast.name}}</h3>
<h3>{{broadCast.phone}}</h3>
</div>
</md-list-item>
</md-list>
Style the md-list in your css file like so:
md-list.make-scrollable {
height: 600px; //Or any other height you wish
overflow-y: scroll;
}
That should make the overflowing content scrollable

Answer 2

You are using too many unnecessary container elements.
<div layout-lt-lg="row" flex-lt-lg="100" class="screen-bg">
<!--header-->
<md-toolbar class="app-bar-bg" style="background-color: #9013fe;">
<div class="status-bar-bg"></div> //desired controller buttons
<div class="md-toolbar-tools"></div> //desired controller buttons
</md-toolbar>
<!--content-->
<md-content flex ui-view>
</md-content>
</div>
Here is a working example. There are some changes but basic structure is almost same.