<div class="base-modal absolute inset-0 flex items-center justify-center">
  <div class="overlay fixed inset-0 bg-[rgba(230,230,230,0.6)] z-10"></div>
  <div class="base-modal__content z-20 w-[95%] h-4/5 overflow-y-auto rounded-lg bg-white p-4 shadow-sm md:w-4/5 lg:w-3/5">
    <div class="flex flex-col size-full">
      <div class="header__part h-12">
        <p>This is header</p>
      </div>

      <div class="content__part h-[calc(100%-6rem)] w-full">
        <div id="content__wrapper" style="align-items: center;" class="flex flex-wrap h-full justify-center overflow-y-auto">
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil fugit ipsum vel laboriosam minima, animi sapiente, laborum voluptates id temporibus dolorem provident! Debitis totam incidunt iusto cum quos itaque corrupti.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil fugit ipsum vel laboriosam minima, animi sapiente, laborum voluptates id temporibus dolorem provident! Debitis totam incidunt iusto cum quos itaque corrupti.</p>
        </div>
      </div>

      <div class="footer__part h-9 mt-3">
        <p>This is footer</p>
      </div>
    </div>
  </div>
</div>

const contentDom = document.querySelector('#content__wrapper')

window.addEventListener("resize", () => {  
  if(window.innerHeight < 400){
    contentDom.style.alignItems = 'flex-start'
  }else{
    contentDom.style.alignItems = 'center'
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com