Currently, I am utilizing Materializecss to showcase a modal window. Within this modal, there is a div Content that showcases items using ng-repeat. However, the issue arises when the content fills up and the css rule for my content-div fails to take effect. This results in the overflow (scrollbar) appearing on the modal itself rather than the content-div.
My objective is to ensure that the title and buttons remain visible at all times.
The simplified HTML structure:
<div class="modal">
<div class="title"> ... </div>
<div class="content">
<ul>
<li class="collection-item" ng-repeat="usr in returnedUsers">{{usr.UserName}}</li>
</ul>
<div class="button">
</div>
CSS classes used:
.modal {
background-clip: padding-box;
background-color: #eee;
border-radius: 2px;
display: none;
left: 0;
margin: auto;
max-height: 70%;
max-width: 55%;
overflow-y: auto;
padding: 24px;
position: fixed;
right: 0;
transform: translate(0px);
z-index: 1000;
.content{
max-height: 60%;
overflow: auto;
}
Simplified JSFiddle available here: fiddle
These related SO posts did not provide a solution to my problem:
css max-height inside max-height
Table inside a div with max-height
firefox css max-width and max-height inside max-height div
Please Note: Any changes made to the class modal should be avoided if possible.
Note2: Simply setting the height on my .content did not resolve the issue for me.