With Angular material, creating a responsive layout is simple. Currently, I have set up 2 columns with independent overflow like in this example: http://jsfiddle.net/2f6qscrp/227/. However, the issue lies in responsiveness; on mobile, the columns stack below each other and on larger devices, they align to the right/left correctly but still maintain separate overflows instead of creating one main overflow that encompasses both columns. Is there a way to address this problem?
<div ng-app="home" ng-controller="MainCtrl" class="scroll">
<div layout="column" layout-gt-sm="row" class="scroll">
<div flex class="blue">
[Content for blue column goes here]
</div>
<div flex class="red">
[Content for red column goes here]
</div>
</div>
</div>
CSS:
.scroll {
min-height: 100%;
height:100%;
}
.blue {
background-color: #0D47A1;
color: #fff;
min-height: 100%;
overflow-y: scroll;
height:100%;
}
.red {
background-color: #B71C1C;
color: #fff;
min-height: 100%;
overflow-y: scroll;
height:100%;
}
Thank you.