JSFiddle - React, Tailwind, and code Playground

Workaround for vertical heights going from zero to auto (since auto doesn't animate). Starts to animate faster than desired on tall screens however.

HTML

<div class="stretchy">
  <div class="stretcher">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis iste dolores, laborum excepturi repellat. Dolorem vero perferendis deleniti excepturi quisquam voluptatibus dicta, reprehenderit, fugit tenetur nisi sapiente veniam reiciendis impedit.
</div>
  </div>

CSS

.stretchy{
  width:300px;
  /* transition:all 1000ms ease-in-out; */
  background:teal;
  color:white;
  padding:10px;
  box-sizing:border-box;
  min-height:10px;
  overflow:scroll;
}

.stretchy:hover{
  /* max-height:90vh; */
  /* max-height:calc(100vh - 16px); */
  /* causes a delay in closing when screen is taller :( */
}

.stretcher{
  height:0px;
  overflow:hidden;
  transition:all 1000ms ease-in-out;
}

.stretchy:hover > .stretcher{
  height:100%;
}