CSS-Grid dropdown is cut off

I'm currently facing an issue with CSS grid and a dropdown menu that is cut-off. I've created a simple dropdown-wrapper with position: relative and the menu itself with position: absolute.

Normally this shouldn't be a prob, but when used in CSS-grid the dropdown is not overlapping and cut-off instead.

the light greyish thing should be the dropdown menu. This should normally overlap the blackish area.

My layout is based on css grid and I have a grid with grid areas defined

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.5fr 1fr;
  grid-template-rows: 103px 1fr 1fr 1fr 1fr 0.5fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    'header header header header header'
    'stage stage stage selector selector'
    'stage stage stage selector selector'
    'stage stage stage selector selector'
    'stage stage stage selector selector'
    'panel panel panel selector selector'
    'footer footer footer footer footer';
  width: 100%;
  height: 100%;
}

The dropdown is placed inside the panel area.

.panel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
}

The dropdowns CSS

.dropdown {
  position: relative;
  display: inline-block;
  min-width: 180px;
  padding: 10px 0;
  overflow: visible;
  z-index: auto;
}

.dropdown-content {
  z-index: 1;
  position: absolute;
  transition: all 0.5s ease;
  left: 0;
  top: 20px;
  display: bock;
}

And the simplified dropdowns html

<div class="dropdown">
  <button>
   ... texts and icon ...
  </button>
  <ul class="dropdown-content">
    <li>Entry 1</li>
    <li>Entry 2</li>
  </ul>
</div>

I don't really know what I'm doing wrong here. Any help or ideas are really appreciated.