css - 使用css添加垂直滚动条时如何不裁剪下拉菜单？

Question

我希望在使用 css 添加垂直滚动条时显示下拉菜单。

我想做什么？我有一个项目列表，单击一个列表项会打开下拉菜单。添加垂直滚动条时会裁剪此下拉菜单（当列表项更多时添加）。

下面是代码，

.side_panel {
  flex-shrink: 0;
  position: relative;
  height: 100%;
  top: 0;
  bottom: 0;
  display: flex;
}

.list {
  display: flex;
  width: 320px;
}

.list_items {
  flex-grow: 1;
  overflow-y: auto;
  position: relative;
}

.item {
  position: relative;
  display: flex;
}

.details {
  width: calc(100% - 85px);
  height: 100%;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown_wrapper {
  position: relative;
}

.dropdown_contents {
  position: absolute;
}

<div class="main" style="flex: 1 1 0%; overflow: auto; display:flex;">
  <div class="canvas_holder" style="visibility: initial; display: 
        initial;"></div>
  <div class="side_panel">
    <div class="list">
      <ul class="list_items">
        <li class="item">
          <div class="details">
            <div class="row1">
              <h5>item1</h5>
              <div class="dropdown_wrapper">
                <button>dropdown_button</button>
                <div class="dropdown_contents">
                  <div>one</div>
                  <div>two</div>
                </div>
              </div>
            </div>
        </li>
      </ul>
      <div class="action_buttons">
        <button>add button</button>
      </div>

      </div>
    </div>

有人可以帮我解决这个问题。谢谢。

标签： css