How to make md Content scrollable in Angular material Design

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>

Solution

To make the list scrollable:

1. 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>
   

2. 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

Comments

[Dave Gööck]

I have a similar problem. I'm using angular components and the md-content is wrapped in a component element <my-component>. I see no option to drop the component element beside dropping the component at all. The component keeps scaling and I have no idea how to make it scrollable beside giving it a fixed height.