I have a webpage with main content and also a popup that can appear over the main content. The popup will darken the background and display the popup content over everything else. I want the popup to have maximum dimensions so that it can have padding around the edges and not occupying the whole page. When creating my popup, I want a portion of the popup to have a scrollbar if the content is overflowing.
When the page shrinks, automatically add a scrollbar to the green content in the example below and shrink the size of that green content.
https://jsfiddle.net/maz6L8o0/122/
HTML
<body class="main">
<div>Main content</div>
<div class="popup-background">
<div class="popup-foreground">
<div class="popup">
<div class="popup-header">header</div>
<div class="popup-content">
<div class="content">
ghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg df
</div>
</div>
<div class="popup-footer">footer</div>
</div>
</div>
</div>
</body>
CSS
.main {
// Represents the main content of the web page
background: grey;
height: 100%;
width: 100%;
}
.popup-background {
// Represents the background to "darken" the main content
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-around;
align-items: center;
.popup-foreground {
// Represents the popup foreground aka, the maximum space the popup is "allowed" to occupy
position: absolute;
height: calc(100% - 120px);
width: calc(100% - 200px);
background: rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
.popup {
// This is the actual popup
display: flex;
flex-direction: column;
background: grey;
padding: 10px;
.popup-header {
background: red;
}
.popup-content {
background: green;
.content {
overflow-y: auto;
}
}
.popup-footer {
background: blue;
}
}
}
}
A working example online of this would be on LinkedIn when you go to edit your intro.