Make tailwindcss modal dialog with scrolling content?

[sergeynilov]

Hello,
Basing on tailwindcss 2 modal example https://alpinetoolbox.com/examples/modal
I make modal dialog with header/footer/ Content with many rows.
I need header and footer always be visible. Content must be scrollable.
I try to set content with scrolling bar, like

<div  style="height : calc( 100vh - 120 ) !important;" >
    <div class="modal-header flex justify-between items-center pb-2">
         ...
    </div>

     <div class="modal-content py-4 text-left px-6  overflow-y-auto "  style="height : calc( 100vh - 320 ) !important;">

But failed. Please take a look at codepen : https://codepen.io/sergeynilov/pen/vYyPrrE

Thanks!

[olets]

Did you mean to put the flex justify-between on the outer div? Moving those classes from the header element to the wrapper, and adding flex-col will get you close, but you still need to prevent it from being taller than the screen.

There are flexbox and grid solutions to "sticky header and footer". Here is a common minimal flexbox solution: https://codepen.io/henry/pen/mdRWyyY

Its model is

.wrapper {
  display: flex;
  flex-direction: flex-column;
  height: the height for your design;
  max-height: 100vh (and account for mobile browser ui if necessary)
}

.content {
  flex-grow: 1;
}

<section class="wrapper">
  <header>...</header>
  <div class="content">...</div>
  <footer>...</footer>
</section>

Don't forget accessibility! Your basic options are the dialog element or the "dialog" role

edit: add html snippet

[Christopher784]

All modal is scrollable, but I need header and footer always be visible. Content must be scrollable.

GarageBand PC