容器溢出：滚动，但我希望一些元素从中溢出

Question

我有一个设置为“overflow-y:scroll”的容器，其中有很多元素。其中之一是下拉菜单，我希望它能够溢出容器。它已经设置为position:absolute，但是，它是相对于容器内的元素而不是容器本身，所以这对我不起作用......

容器的CSS：

.container {
  position: static;
  border-radius: 24px;
  box-shadow: 0px 0px 12px rgba(0, 71, 255, 0.4);
  padding: 2rem;
  margin: 1rem;
  width: 100%;
  overflow-y: scroll;
  max-height: 55dvh;
}

下拉菜单CSS：

.dropdownmenu {
  z-index: 1000;
  max-height: 400px;
  overflow-y: scroll;
  direction: ltr;
  opacity: 0.9;
  position: absolute;
  margin-top: 8px;
  border: none;
  border-radius: 24px !important;
  display: flex;
  flex-direction: column;
  width: 95%;
}

同样，容器内有几层元素，因此绝对位置是相对于内部元素的，而不是相对于容器的，我需要它保持这种状态。

Answer 1

好吧，我通过一些精心设计的操作解决了这个问题（但是，通过阅读周围的内容，这似乎是最好的解决方案）：

1. 我创建了一个名为 PortalContainer 的新组件，如下所示：

import ReactDOM from "react-dom";

const PortalContainer = ({ children }) => {
  const portalRoot = document.getElementById("root");

  return ReactDOM.createPortal(children, portalRoot);
};

export default PortalContainer;

2. 我已经包装了我想要从其父级（具有溢出：滚动）转义的元素，如下所示：

 <PortalContainer>
       <div
         ref={menuRef}
         style={{
           backgroundColor: colorScheme,
           boxShadow: `3px 3px 3px rgba(0,0,255,0.1)`,
           top:
             dropDirection === "down"
               ? buttonPosition.top
               : buttonPosition.top - dropdownHeight - 100,
           left: buttonPosition.left,
           width: buttonWidth,
           transform: dropDirection === "up" ? "translate(0, 0)" : null,
         }}
         className={`${styles.dropdownmenu} ${
           showDropMenu === item.id ? `${styles.active}` : `${styles.inactive}`
         }`}
       >
         {options?.map((option, index) => {
           return (
             <button
               type="button"
               id={props.index}
               key={index}
               onClick={() =>
                 handleSelect(option.name, props.index, option.id, index)
               }
             >
               {option.name}
             </button>
           );
         })}
       </div>
     </PortalContainer>

这确实有效，但我真的希望他们在 css 中添加一个功能，让子元素可以选择转义其父元素，即使父元素有溢出：隐藏/滚动。类似的东西：

.parent {
overflow: hidden;
} 
.child {
overflowEscape: escape;
}