How in tailwindcss make modal dialog when page has horizontal scrolling?

[mstdmstd]

Hello,
Basing on tailwindcss 2 modal example https://alpinetoolbox.com/examples/modal
I make modal dialog with setting max-h-screen class, like
 

<div class="overflow-auto" role="dialog" style="background-color: rgba(0,0,0,0.5)" x-show="showModal"
:class="{ 'absolute inset-0 z-50 flex items-center justify-center': showModal }"
@keydown.escape.window="showModal = false"
>
<!--Dialog-->
<div
class="flex flex-col sm:h-4/5 md:h-4/6 max-h-screen justify-between rounded shadow-lg py-4 text-left px-6 modal-container"
x-show="showModal" @click.away="showModal = false" x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="ease-in duration-300" x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90">

and it works ok, untill page has no horizontal scrolling.

If page has horizontal scrolling - then only part of the page is with modal and space below is
empty and this makes page

I also tried to use max-h-full instead of max-h-screen, but no effect.

How can I made it ?

Thanks!