CSS网格下拉列表被切断

Question

我目前正在面临CSS网格和截止菜单的问题。 我已经创建了一个简单的下拉列表 - <代码>位置：相对和菜单本身，位置：绝对。

通常，这不是一个问题，但是当在CSS网格中使用时，下拉列表不会重叠和截止。

浅灰色的东西应该是下拉菜单。通常，这应该与黑色区域重叠。

我的布局基于CSS网格，我的网格有一个网格区域定义

.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%;
}

该下拉列表在面板区域内放置。

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

下拉列表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;
}

和简化的下拉列表html

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

我真的不知道我在这里做错了什么。 任何帮助或想法都非常感谢。