阻止在父级创建滚动（在纯CSS中）弹出

Question

我想创建一个简单的弹出窗口（想想按钮下方的组合框列表）。弹出窗口应显示在现有元素上，即不是预先分配空间。

有很多例子使用`position：relative - > overflow：hidden - > position：absolute'层次结构，直到popover从容器底部流出，这种情况下，它的大小影响父容器并创建滚动。

这是codepen sample。我试图得到的是在最右边的列上没有滚动。

<div class="main"> 
    <div class="column"> 
    <h2>no overflow</h2> 
    <div class="tall">x</div> 
    <div class="tall">x</div> 
    </div> 
    <div class="column"> 
    <h2>basic overflow</h2> 
    <div class="tall">x</div> 
    <div class="tall">x</div> 
    <div class="tall">x</div> 
    </div> 
    <div class="column"> 
    <h2>popover without overflow</h2> 
    <div class="tall">x</div> 
    <div class="overlay"> 
     popover should be vislble below 
     <div class="overflow"> 
     <div class="absolute short"> 
      z 
     </div> 
     </div> 
    </div> 
    <div class="tall">x</div> 
    </div> 
    <div class="column"> 
    <h2>popover with overflow</h2> 
    <div class="tall">x</div> 
    <div class="overlay"> 
     popover should be vislble below 
     <div class="overflow"> 
     <div class="absolute"> 
      z 
     </div> 
     </div> 
    </div> 
    <div class="tall">x</div> 
    </div> 
</div> 

和SCSS文件：

html, body { 
    height: 95%; 

} 

.main { 
    display: flex; 
    flex-direction: row; 
    border: 2px solid red; 
    height: 100%; 
    .column { 
    margin-left: 20px; 
    height: 100%; 
    flex: 1; 
    border: 1px solid black; 
    overflow-y: auto; 
    .tall { 
     height: 300px; 
     border: 1px solid blue; 
    } 
    .overlay { 
     position: relative; 
     .overflow { 
     background: #F00; 
     overflow: hidden; 
     .absolute { 
      opacity: 0.5; 
      width: 100%; 
      height: 600px; 
      position: absolute; 
      background: #FF0; 
      &.short { 
      height: 200px; 
      } 
     } 
     } 
    } 
    } 
} 

Answer 1

我认为（如果我对这个问题清楚），这个问题可以很容易解决，只需用min-height替换你的高大类的height和max-height如果将最小高度设置为短高度，则弹出窗口不应溢出。

我做了我自己的codepen做演示（我调整了popover的高度为100，并将最小高度设置为100）。代码与您发布的代码相同，但.short课程中的高度和.tall课程中的最小/最大高度除外。如果弹出窗口中的内容高度大于指定的高度，我会在短期课程中添加overflow:hidden;。

我注释掉列没有popovers但随意评论他们进来。

希望这有助于