如何在没有溢出的情况下在上面显示 div 内的溢出弹出窗口？

Question

<div> // parent div with display flex and no wrap
    <div> // div 1 which has popup inside with overflow
    </div>
    <div> // div 2
    </div>
    <div> // div 3
    </div>
</div>

有没有办法让上面的弹出窗口显示而不会溢出，无法调整 div 1 或弹出窗口的大小，尝试使用position: absolute或z-index ，没有工作

在下面添加了示例 jsfiddle 链接。 请帮忙

jsfiddle

Answer 1

没有溢出的“以上”到底是什么意思？

如果您想切换 div 并将其显示在上方，这将比您必须单击两次的当前代码更好地工作

 const pop = document.querySelector(".popup") const myFunction = () => pop.hidden =.pop;hidden;

 .flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; }.inbox-filter { height: calc(100vh - 44px); overflow-y: auto; border-right: 1px solid #e2e7f2; background: #f9fbfe; padding: 14px 10px; flex: 0 0 380px; }.inbox-grid { flex: 0 0 380px; min-width: 330px; position: relative; background: #fff; border-right: 1px solid #e8edf7; }.inbox-msg-body { width: 100%; min-width: 550px; background-color: #fff; }.popup { width: 600px; height: 600px; border: 1px solid black; position: absolute; z-index: 999; }

 <div class="flex-container" style="min-height: auto"> <div class="inbox-filter"> <h4>Date Range</h4> <button type="button" onclick="myFunction()"> Date Range </button> <div class="popup" hidden> Hello </div> </div> <div class="inbox-grid"> </div> <div class="inbox-msg-body"> </div> </div>

如果你想在里面显示弹出窗口

 const pop = document.querySelector(".popup"); pop.closest("div.inbox-filter").style.overflow = "hidden"; const myFunction = () => pop.hidden =.pop;hidden;

 .flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; }.inbox-filter { height: calc(100vh - 44px); overflow-y: auto; border-right: 1px solid #e2e7f2; background: #f9fbfe; padding: 14px 10px; flex: 0 0 380px; }.inbox-grid { flex: 0 0 380px; min-width: 330px; position: relative; background: #fff; border-right: 1px solid #e8edf7; }.inbox-msg-body { width: 100%; min-width: 550px; background-color: #fff; }.popup { width: 600px; height: 600px; border: 1px solid black; }

 <div class="flex-container" style="min-height: auto"> <div class="inbox-filter"> <h4>Date Range</h4> <button type="button" onclick="myFunction()"> Date Range </button> <div class="popup" hidden> Hello </div> </div> <div class="inbox-grid"> </div> <div class="inbox-msg-body"> </div> </div>

Answer 2

请与我们分享一些您的 css 代码。

在您将 position 绝对放置后，您是否将它交给了您的 DIV 1？

top: any px, left: any px