下拉菜单隐藏在父元素后面

Question

#container {
  width: 70vw;
  height: 85px;
  position: relative;
  border: 1px solid;
  display: flex;
  overflow-x: scroll;
  scroll-behavior: smooth;
  padding: 0 10px;
}

.wrapper {
  height: 100%;
  flex: 1 0 33.39%;
}

<div id="container">
  <div class="wrapper">
    <div>title</div>
    <component></component>
  </div>
  <div class="wrapper">
    <div>title</div>
    <component></component>
  </div>
  <div class="wrapper">
    <div>title</div>
    <component></component>
  </div>
  <div class="wrapper">
    <div>title</div>
    <component></component>
  </div>
  <div class="wrapper">
    <div>title</div>
    <component></component>
  </div>
</div>

我有一个容器，其中我一次显示三个元素，并使用overflow-x：scroll隐藏其他元素，以便我可以滚动元素。单击组件时，将显示一个下拉菜单，但该下拉菜单将隐藏且不显示。在对容器使用overflow-y：visible时，将overflow-y设置为auto。是否有办法显示使用overflow-y：visible的下拉列表。

内部组件

<div id="container">
  <div style="position:relative;display:flex">
      <button>show</button> 
     <dropdown-list><dropdown-list>           
  </div>
</div>

点击按钮并使用变量下拉列表显示或隐藏

内部下拉列表

<div id="container" style="display:flex;position:absolute;flex-direction:column">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
</div>