为何屏幕高度缩小时div背景收缩且内容溢出？如何解决？

针对你遇到的屏幕高度缩小时divUnderThatNav背景收缩、内容溢出的问题，结合参考站点的实现逻辑，给你几个精准的排查和解决方向：

• 排查父容器的高度约束
  很多时候子容器的异常是父级导致的：如果父元素设置了固定height或max-height，哪怕子容器用min-height或height: auto，也会被父级的高度限制截断。先检查父容器样式，把固定height改成min-height，比如父容器设为min-height: 100vh，确保它能随内容撑开。

• 正确组合高度与溢出属性
  之前试的单个属性没生效，是因为没搭配对：

  #divUnderThatNav {
    min-height: 20vh; /* 保留最小布局高度 */
    height: auto; /* 自动适配内容高度 */
    overflow: auto; /* 内容超出时显示滚动条，避免溢出截断 */
  }
  

  如果不想出现滚动条，确保父容器没有裁剪，给父级加overflow: visible，同时子容器的min-height要保证能容纳内容。

• 用Flex布局兜底自适应
  参考站点大概率用了Flex来实现容器自适应，你可以给divUnderThatNav的父容器设置：

  .parent-of-divUnderThatNav {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  #divUnderThatNav {
    flex-grow: 1; /* 占满父容器剩余空间 */
    min-height: fit-content; /* 内容高度不足时，容器不收缩到小于内容 */
  }
  

  这种方式能让容器在视口足够时占满空间，视口缩小时自动跟随内容高度扩展，背景也会跟着容器高度变化。

• 检查背景属性的影响
  如果你的背景用了background-size: cover或background-attachment: fixed，可能会出现视觉上的"收缩"错觉。可以把背景改成background-attachment: local，让背景随容器内容滚动，或者用background-size: 100% 100%（但可能拉伸，按需选择）。

之前你试的height: max-content、display: inline-block没生效，大概率是因为父容器有强制高度限制，或者没有配合父级的布局方式调整，先从父容器的样式排查起，再结合上面的Flex方案，基本能解决问题。

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