React项目中打开Dropdown组件导致外层容器被撑开如何解决？

解决方案 #

核心思路是让Dropdown组件脱离正常文档流，不参与父容器的高度计算，自然就不会撑开外层容器，具体调整方式如下：

• 第一步：给Bar组件的根元素添加定位上下文
  给Bar的外层DOM添加CSS规则position: relative，注意不要给Bar加overflow: hidden属性，否则展开的Dropdown会被裁剪。
• 第二步：修改Dropdown组件的定位规则
  给Dropdown的弹出层根DOM添加如下CSS：

position: absolute;
/* 按需调整定位坐标，如下配置是让Dropdown贴在Bar组件底部左对齐 */
top: 100%;
left: 0;
z-index: 999; /* 避免被其他页面元素遮挡 */
/* 宽度可按需设置，比如和Bar同宽就写 width: 100%，也可以固定宽度 */

如果使用的是第三方组件库的Dropdown组件，无需手动写CSS，直接调用组件内置的悬浮层定位配置即可：比如常见组件库的Dropdown都有自定义弹出层挂载容器的属性，将属性值设置为触发节点的父节点，即可让弹出层挂载到Bar节点下，自动实现脱离文档流的定位效果；如果父容器存在滚动裁剪的问题，可以直接配置组件的portal属性，将弹出层挂载到body节点下。

• 额外排查项
  检查外层App、Bar的上层容器是否设置了overflow: auto/overflow: hidden，如果存在这类规则且不想修改，直接将Dropdown弹出层挂载到body即可规避撑开容器+被裁剪的问题。

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