How to get md-content to scroll within a form?

Below is the layout of a screen in my application. I am unable to get the md-content to scroll. Instead the entire page scrolls. Any suggestions?

`

<form name="myForm"> <!-- Header Area--> <div> <label>Header</label> <md-button type="submit" ng-disabled="myForm.$invalid">Submit</md-button> </div> <!-- Content Area--> <md-content> <!-- Form fields--> </md-content> </form> 

`

I tried setting the form's overflow to hidden and explicitly setting the md-content's overflow to auto but that doesn't help.

Below is the plunker i created which demonstrates the entire page scrolling instead of md-content.

2 Answers

Changing your form element to: <form name="myForm" flex layout="column">

seems to do the trick.

Mike Feltman's solution works, but all that you really need is to apply layout attribute (layout="column" in your case) to your form.

Check this one: