React.js中Popper内div无法自适应展开的技术问题

核心原因 #

点击按钮加载内容后，Popper没自动跟着内容调整高度，再加上可能给容器设了固定高度限制，才导致内容溢出容器。

具体解决步骤 #

• 移除容器的固定高度约束
  找到Popper容器的CSS代码，删掉固定的height、max-height或不合理的min-height（比如你之前设置的300px），让容器能完全跟着内容自动撑开：

  .popper-container {
    /* 删除 height: 200px; 这类固定高度设置 */
    min-height: auto;
    overflow: visible; /* 确保内容不会被容器裁剪 */
  }
  

• 内容加载完成后触发Popper更新
  因为内容是动态加载的，加载完成后需要通知Popper重新计算自身尺寸和位置。在处理“See link options”按钮点击的函数里，等内容加载完成后调用Popper实例的update()方法：

  function handleSeeOptionsClick() {
    // 加载链接选项的逻辑
    loadLinkOptions().then(() => {
      // 内容加载完成后更新Popper
      popperInstance.update();
    });
  }
  

• 排查父元素的限制
  如果上面的方法没用，检查Popper的父级元素有没有设置overflow: hidden或者固定高度，这些约束也会导致容器无法随内容长高，需要把这些设置移除。

注意事项 #

不要用overflow: auto，这会强制生成滚动条，不符合你的需求；另外要确保动态加载的内容没有设置position: absolute这类脱离文档流的样式，否则容器无法感知内容的高度变化。

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