CODEWITHSUNDEEP
htmlcssmodal-dialogflexbox
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29149

scrollable dialog breaks background flex-grow

I have a simple page like

<main>
    <header>Header</header>
    <section>Content</section>
    <footer>Footer</footer>
</main>
<dialog>Dialog</dialog>

CSS:

main {
   display: flex;
   flex-direction: column;
}
section {
    flex-grow: 1;
}
...

DEMO

The section fills the whole screen (vertically) and the footer is visible at the bottom.

This layout also works when the section is bigger (higher) that the height of the window

DEMO

Now you can scroll, and the footer is still at the bottom.

BUT, if we have a modal dialog which is also bigger than the screen, all this doesn't seem to work anymore

SCROLL DEMO

If you scroll to the bottom you can see that the footer is not at the bottom anymore. Can this be fixed ? Or is there a nice solution for this ?

Upvotes: 0

Views: 62

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9416

Give dialog{ max-height: 100%}

Here is the FIDDLE

Upvotes: 1

Related Questions