缩小浏览器窗口高度时天气应用div内部元素溢出如何解决

问题原因 #

1. 根容器#main使用了固定高度height: 100vh，高度完全等于视口高度，没有设置最小高度限制。当你缩小窗口高度时，容器会跟着被强制压缩，一旦容器高度小于内部内容的最小总高度，就会出现内容溢出、错位。
2. 内部子容器#weather、#search-main、#Days全部设置了height: 100%，完全继承父级高度。当父容器被压缩到小于内容实际高度时，flex布局的justify-content: space-around计算出的间距会变成负数，直接导致元素重叠、错位滑动。
3. 没有针对小高度视口做适配和溢出处理，内容被压缩后没有兜底展示方案。

修复方案 #

• 替换根容器的固定高度设置，把#main的height: 100vh修改为min-height: 100vh，保证容器至少撑满一屏，内容过多时可以自动撑开高度，不会被强制压缩。
• 给内容容器添加最小高度限制，给#search-main和#Days添加min-height: 420px（数值可以根据你实际内容的最小高度调整），避免内容被压缩到重叠。
• 如果你希望内容始终限制在视口内不撑开页面，可以给#search-main和#Days添加overflow-y: auto属性，内容超出容器高度时自动出现纵向滚动条，不会溢出到容器外。
• 可选补充小高度适配的媒体查询，针对高度较小的窗口缩小元素尺寸，优化展示效果：

@media screen and (max-height: 500px) {
  #search-main h1, #Days h1 {
    font-size: 1.6rem;
  }
  #icon, #icon1, #icon2, #icon3 {
    width: 64px;
    height: 64px;
  }
  .search-item {
    font-size: 16px;
    padding: 6px 12px;
  }
}

内容的提问来源于stack exchange，提问作者Alper Yıldırım