如何动态设置max-height避免外层dialogBox容器出现滚动条？

核心思路是用Flexbox布局让对话框内部自动分配空间：固定上方内容的高度，让下方长内容区域占据剩余空间，这样只会在长内容区域出现滚动条，整个对话框不会滚动。

修改后的完整代码：

<div id="dialogBox" style="max-height:90vh; overflow:hidden; display:flex; flex-direction:column;">
  <div class="up-stuff" style="flex-shrink:0;">
    Arbitrary inline and block elements here. Let's call them "up stuff".
    <table rules="all" border="1" style="border-collapse:collapse; margin-bottom:1rem;"><tbody>
      <tr><th scope="col">ID</th><th scope="col">Name</th></tr>
      <tr><td>014436</td><td>Name1</td></tr>
      <tr><td>402723</td><td>Name2</td></tr>
      <tr><td colspan="2">"up stuff" ends here.</td></tr>
    </tbody></table>
  </div>
  
  <div style="flex:1; overflow:auto;">
    <div id="withLongContent">
      A dynamic long list of stuff here:
      <ol>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
      </ol>
    </div>
  </div>
</div>

关键调整点：

• dialogBox添加display:flex; flex-direction:column; overflow:hidden;，让内部元素垂直排列，且隐藏对话框本身的溢出内容
• 上方内容包裹在up-stuff容器，设置flex-shrink:0;，保证它的高度不会被压缩，始终占满自身所需空间
• 下方长内容的容器设置flex:1; overflow:auto;，占据对话框剩余的全部空间，内容过长时自动出现滚动条

如果需要兼容不支持Flexbox的旧环境，可以通过计算元素高度动态设置withLongContent的最大高度。

完整代码示例：

<div id="dialogBox" style="max-height:90vh; overflow:hidden;">
  <div id="upStuff">
    Arbitrary inline and block elements here. Let's call them "up stuff".
    <table rules="all" border="1" style="border-collapse:collapse; margin-bottom:1rem;"><tbody>
      <tr><th scope="col">ID</th><th scope="col">Name</th></tr>
      <tr><td>014436</td><td>Name1</td></tr>
      <tr><td>402723</td><td>Name2</td></tr>
      <tr><td colspan="2">"up stuff" ends here.</td></tr>
    </tbody></table>
  </div>
  
  <div style="display:inline-block; width:100%;">
    <div id="withLongContent" style="overflow:auto;">
      A dynamic long list of stuff here:
      <ol>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
      </ol>
    </div>
  </div>
</div>

<script>
function setContentMaxHeight() {
  const dialogBox = document.getElementById('dialogBox');
  const upStuff = document.getElementById('upStuff');
  const withLongContent = document.getElementById('withLongContent');
  
  // 获取对话框和上方内容的实际高度
  const dialogHeight = dialogBox.offsetHeight;
  const upStuffHeight = upStuff.offsetHeight;
  // 计算并设置长内容区域的最大高度
  withLongContent.style.maxHeight = `${dialogHeight - upStuffHeight}px`;
}

// 页面加载时初始化
window.addEventListener('load', setContentMaxHeight);
// 窗口大小变化时重新计算
window.addEventListener('resize', setContentMaxHeight);
</script>

关键说明：

• 给上方内容添加id="upStuff"，方便获取元素高度
• 通过offsetHeight获取元素的实际渲染高度，计算出长内容区域可占用的最大空间
• 监听窗口加载和 resize 事件，确保内容或窗口尺寸变化时高度能实时更新

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