如何在固定高度overflow:hidden容器中完整显示Bootstrap下拉菜单？

问题根源很明确：给容器加overflow:hidden后，容器会创建一个块级格式化上下文（BFC），所有超出容器边界的内容（包括下拉菜单）都会被裁剪——z-index解决不了这个问题，因为它只控制同一BFC内元素的层叠顺序，管不了容器的裁剪规则。

下面给你两种实用的解决办法：

方法1：修改下拉菜单的挂载容器（最简单） #

Bootstrap的下拉组件支持通过data-bs-container属性指定菜单的挂载位置，把它挂载到<body>上，就能脱离原来的overflow:hidden容器，自然不会被裁剪。

修改代码如下：

<div class="toolbar" style="height: 60px; overflow: hidden;">
  <div class="dropdown">
    <!-- 给按钮添加data-bs-container="body" -->
    <button class="btn btn-secondary dropdown-toggle" type="button" 
            data-bs-toggle="dropdown" data-bs-container="body">
      下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">选项1</a></li>
      <li><a class="dropdown-item" href="#">选项2</a></li>
      <li><a class="dropdown-item" href="#">选项3</a></li>
    </ul>
  </div>
  <!-- 其他工具栏内容 -->
</div>

这个方法不需要调整DOM结构，直接加个属性就能搞定，适合绝大多数场景。

方法2：调整DOM结构，把下拉组件移到裁剪容器外 #

如果因为某些原因不能用方法1（比如需要下拉菜单和工具栏元素保持位置关联），可以把工具栏拆成两层：外层设固定高度和相对定位，内层放需要裁剪的内容（加overflow:hidden），下拉组件放在外层容器里，用绝对定位固定在工具栏的对应位置。

示例代码：

<!-- 外层容器：固定高度+相对定位 -->
<div class="toolbar-wrapper" style="height: 60px; position: relative;">
  <!-- 内层容器：放需要裁剪的内容，加overflow:hidden -->
  <div class="toolbar-content" style="height: 100%; overflow: hidden;">
    <!-- 这里放工具栏里会超出的内容，会被正常裁剪 -->
  </div>
  <!-- 下拉组件：放在外层，用绝对定位固定位置 -->
  <div class="dropdown" style="position: absolute; top: 10px; right: 10px;">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
      下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">选项1</a></li>
      <li><a class="dropdown-item" href="#">选项2</a></li>
      <li><a class="dropdown-item" href="#">选项3</a></li>
    </ul>
  </div>
</div>

这种方式更灵活，能精确控制下拉菜单的位置，同时保证其他内容正常被裁剪。

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