Scrolling material design dialog box in CSS

Question

I'm trying to implement the following Material Design dialog box in CSS. This is directly from the Material Design Specifications:

The dialog should expand responsively to fit the screen, but not overflow the screen (it should scroll instead).

---

I'm having trouble finding a decent responsive CSS solution for it

Here is what I've tried (click to expand):

This dialog expands to fit different screen sizes correctly without overflowing, and also provides a scrollbar when the content overflows the dialog frame.

BUT, the topbar and bottombar will not stick to the top and bottom of the dialog frame (they scroll instead).

Since the content of the dialog is indeterminate, I cannot just use fixed headers and footers because the dialog itself may expand or shrink depending on the content.

Is there a way to create this responsive dialog in CSS?

Answer 1

Instead of putting your topbar and bottombar on top of the content, you should put them above/below your content like so:

Dialog topbar
/* remove styles */

Dialog bottombar
/* remove styles */

Dialog content
max-height: 50%
overflow: auto

Dialog frame
position: absolute
top: 20%