如何防止调整浏览器窗口大小时文本内容溢出到上方header区域

布局冲突核心来自两处设置：

1. 内容容器.boring-company-info使用绝对定位+bottom: 28%固定位置，窗口高度缩小时，留给内容的垂直空间小于内容自身高度，就会向上溢出顶到头部导航
2. 外层section固定了height: 100vh，内容超过容器高度时无法自动撑开，进一步加重溢出问题

• 替换绝对定位为弹性布局，实现头部与内容的自然流式排布：
  给外层.layout新增弹性布局属性：

.layout {
  display: flex;
  flex-direction: column;
  /* 原有背景、定位等属性保留不变 */
}

修改.boring-company-info的定位规则，取消绝对定位相关属性，改为弹性填充：

.boring-company-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 原有margin、字体、过渡等属性保留不变，删除position: absolute、bottom: 28%、transform: translateY(20px) */
}

• 调整外层容器高度规则，适配内容长度：
  将section的height: 100vh修改为min-height: 100vh，保证窗口高度足够时撑满全屏，内容超出时可以自动撑开容器高度，允许滚动查看完整内容。
• 小屏适配优化，减少内容占用的垂直空间：
  在移动端媒体查询中缩小标题与正文字号，进一步避免小屏空间不足的问题：

@media screen and (max-width: 641px) {
  .info-title {
    font-size: 2em;
  }
  .tunnels-info-description {
    font-size: 1.1em;
    line-height: 1.5;
  }
}

修改后既保留了原有的全屏背景、内容垂直居中的视觉效果，又能适配不同高度的设备窗口，完全避免内容向上溢出顶到头部的问题。

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