I have a basic angular content window that contains an adjustable group of settings values. When the window is collapsed, the fxLayout collapses properly, but I am having difficulty scrolling vertically. I have attempted to use overflow-y and just overflow (both with scroll), however, when the content extends beyond the window, it becomes inaccessible.
Is there some CSS property that I am overlooking?
Thank you....
Card Component:
<div class="card">
<div class="title">{{title}}</div>
<div class="description">
<ng-content></ng-content>
</div>
</div>
Card CSS:
.card {
border-radius: 10px;
border: 2px solid #bbb;
margin: 10px 10px 30px 10px;
padding: 10px;
overflow-y: scroll;
}
.card .title {
border-bottom: 1px solid #fff;
font-weight: 100;
font-size: 2.5em;
margin-bottom: 5px;
}
.card .description {
font-weight: 300;
font-size: 1.2em;
}
HTML Content:
<card fxLayout="column" fxLayoutAlign="center center">
<h2>Settings</h2>
<div fxLayout="column " >
...
Screenshot: