当内部呈现的列表增加时，如何防止绝对位置的div容器被切断？

问题描述

我正在React中创建一个具有绝对位置设置的下拉菜单，当菜单变长时，它将被按钮列表填充。我可以看到是否缩小了该元素的效果，它只是溢出而已被隐藏。我尝试设置overflow: visible，但是很遗憾，它不起作用，或者我在这里做错了。对于这个问题，我似乎找不到很好的解决方案。

如何解决？

谢谢，这是我的代码：

  <div className={styles.Container} onClick={(e) => {
      e.preventDefault()
      setIsOpen(!isOpen)
    }}>
      <div className={menuClassNames} onClick={(e) => e.stopPropagation()}>
        <div className={styles.option}>
          <p>{menuLabel}</p>{" "}
          <div onClick={(e) => {
            e.preventDefault()
            setIsOpen(false)
          }} className={styles.iconWrapper}>
            <Close />
          </div>
        </div>

        {menus.map((m,i) => {
          return <button key={i} className={styles.OptionButton} onClick={(e) => {
            e.preventDefault()
            handleMenuClick(m.onClick)
          }}>
          </button>
        })}
      </div>
    </div>

CSS

.Container {
  position: relative;
  display: flex;

  .Menu {
    display: none;
    z-index: 1;
    position: absolute;
    right: -10px;
    top: -10px;

    background: #ffffff;
    Box-shadow: 0px 8px 16px rgba(0,51,76,0.1);
    border-radius: 4px;

    width: 240px;
    overflow: auto;

    p {
      color: #123962;
      font-style: normal;
      font-weight: bold;
      font-size: 16px;
      line-height: 18px;
    }

    li {
      list-style-type: none;
    }

    &.Open {
      display: block;
    }

    .option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
    }
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

absolute html position