Utilizing Angular Material's md-content directives, I am working on creating a section that adjusts in height to fill the available vertical space while allowing its content to scroll. However, a problem arises when viewing the page on a small screen as the content shrinks dramatically and almost becomes invisible. My goal is for the md-content to either stop scrolling or have a minimum height so that the page scrollbar shows up and users can still view the content.
Update: Take a look at this plunker link for a demonstration of the issue: https://plnkr.co/edit/NVbEHo0CPxX5Zzi4U88U?p=preview
<body layout="column">
<div>
<h1>Header</h1>
</div>
<md-content layout="row">
<div flex="50">Left Column</div>
<md-content flex="50" layout="column">
<h2>Section Header</h2>
<md-content layout="column" flex>
<h3>Scroll Header</h3>
<md-content flex layout="column" style="min-height: 300px">
<md-content flex>
Scrollable content here...<br/>
</md-content>
</md-content>
</md-content>
</md-content>
</md-content>
</body>
When the browser window is large, the scrollable content functions correctly. However, upon resizing the browser, the md-content containing the scrollable element collapses until it disappears.
Update 2: I have now updated my plunker with a more illustrative example. In order to make the desired section scrollable and flexible to the bottom of the viewport, I have set all parent elements as md-content with a layout attribute. While I can enforce a min-height on the scrollable component, reducing the browser size results in its parent md-content displaying a scrollbar. Adding another min-height to that md-content would require knowledge of the content height, which might be dynamic.
Ideally, during vertical browser shrinkage, I aim for the scrollable content to only reduce to its minimum height, prompting all parent md-content elements to cease scrolling behavior and displaying just the body scrollbar.