CSS Grid and hovering to show more content

Hello,

i have a little problem and maybe someone can help me getting over it.

I have a two column grid and in the second column a new grid with one column:

.wrapper{
    display: grid;
    grid-template-columns: 0.25fr 1fr;
    min-height: 98vh;
    grid-gap: 10px;
    grid-template-rows: 1fr;
}

.project{background-color: #FF0063;}

.hotline{
  background-color: #86EF78;
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(auto-fill, 50px);
}

So if i click on the left side a panel with buttons on the right side should appear. The content can be really flexible, sometimes there are only 1 to 2 buttons but sometimes there are 20 to 30. To compensate this i wanted to hover over my grid and expand it to see the whole content.

.item1{
    overflow: hidden;
}
.item1:hover{
    background-color: white;
    grid-row: auto;
    overflow: visible;
}

I tried something like this and 30 other options but nothing worked.

What i need is that my first row in my second grid just spans over an auto amount of rows.

I want to show only the first row of buttons, then hover over it and expand it to see all buttons. but i only get overflow or kill my grid complete.

Has someone an answer or a tip for me? Is it even possible with grid?

I really like the grid to place my content but only if there is no flexible unknown content to catch.

And if i want my grid to take the full width of my content area, do i really have to use vh to stretch every item to the bottom?

thanks in advance.