I'm currently experimenting with HTML dialogs, and have stumbled across a problem regarding flex container constraints.
My HTML is as follows:
<body><dialog id="dialog"><div id="container"><div id="header"> Header</div><div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><div id="footer"> Footer</div></div></dialog></body>And the accompanying CSS looks like this:
html, body, div { margin: 0; padding: 0; border: 0;}dialog { display: flex; border: 0; padding: 0; height: 80vh; width: 80vw; overflow: auto;}dialog::backdrop { background: #00000080;}#container { display: flex; flex-direction: column; border: 4px solid red; background: yellow;}#container > * { margin: 10px;}#header { background: cyan; flex-grow: 0;}#content { background: red; overflow-y: auto; flex-grow: 1; min-height: 50px;}#footer { background: magenta; flex-grow: 0;}As illustrated below, everything appears to work as expected when the 'dialog' element is above its minimum height value.
However, when the 'dialog' element reaches its minimum height and displays its scrollbar, the '#container' div continues to shrink below the height of the dialog.
It's important to note that the final 'dialog' element will require a visible border, and the '#container' div is designed to prevent dialog scrollbars from overlaying the border aesthetic (i.e. the '#container' border is pushed aside rather than overlaid by the 'dialog' scrollbars).
Please see CodePen below:
Any advice and/or assistance would be most appreciated.
I've attempted various settings, but to be completely honest, this entire mechanic seems is utterly unintuitive to me; I am well and truly stuck.
