如何结合overflow:auto与overflow:visible实现内容可滚动且溢出可见？

当然有办法实现这种效果，核心思路是用双层容器嵌套来拆分两种overflow属性的职责：

• 外层容器：设置overflow: visible，同时定义好你需要的宽高尺寸，它的作用是允许内部元素的溢出内容突破容器边界显示。
• 内层容器：设置overflow: auto，并且将宽高设为100%，让它完全填充外层容器，这样内层的长内容就能正常滚动，而内层中需要溢出显示的元素（比如下拉菜单、悬浮提示框），会因为外层的visible属性不受容器边界限制。

示例代码 #

<div class="outer-container">
  <div class="inner-container">
    <!-- 可滚动的长内容 -->
    <p>这里是大量可滚动的内容...（省略重复文本）</p>
    <p>这里是大量可滚动的内容...</p>
    <p>这里是大量可滚动的内容...</p>
    <!-- 溢出显示的元素 -->
    <div class="overflow-item">我是一个宽度超出容器的元素，能完整显示</div>
  </div>
</div>

.outer-container {
  width: 300px;
  height: 200px;
  overflow: visible;
  border: 1px solid #ddd;
  margin: 20px;
}

.inner-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 10px;
  box-sizing: border-box;
}

.overflow-item {
  width: 400px;
  height: 60px;
  background: #e8f4fa;
  line-height: 60px;
  padding-left: 10px;
}

这个示例里，内层容器的长内容可以正常滚动，而.overflow-item因为外层容器是overflow: visible，能完整显示出超出外层宽度的部分，完美结合了两种属性的效果。

内容的提问来源于stack exchange，提问作者SimonSimCity