100vh在移动端正常，PC端100%宽度/缩放时失效问题求助

问题分析 #

你的布局中，.mars容器使用min-height:100vh配合flex垂直分布元素，但在宽屏PC全屏状态下，图片高度超出视口导致容器溢出。核心问题点：

• min-height:100vh允许容器高度超过视口，当图片宽高比远大于屏幕宽高比时，flex:1 0 auto会让图片尽可能占据空间，加上height:inherit继承容器的最小高度设置，最终导致整体高度突破100vh限制。
• 容器的overflow:auto会触发滚动条，但这并非预期效果。

解决方案 #

修改以下CSS代码，确保容器严格贴合视口高度，图片自适应剩余空间且不溢出：

div.mars {
    /* 将min-height改为固定height，强制容器高度等于视口 */
    height: 100vh;
    /* 替换overflow:auto为hidden，彻底避免内部元素溢出 */
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

img.mars {
    flex: 1 1 auto; /* 允许图片在空间不足时收缩，防止撑爆容器 */
    max-width: 100%; /* 限制图片宽度不超出容器 */
    max-height: 100%; /* 限制图片最大高度为容器剩余空间 */
    object-fit: cover; /* 保持图片比例并裁剪多余部分 */
    /* 移除height:inherit和width:inherit，避免继承min-height带来的异常 */
}

/* 固定.greet区域高度，防止被flex布局压缩 */
.greet {
    flex-shrink: 0;
    padding: 16px; /* 可根据需求调整内边距 */
}

补充说明 #

• 使用height:100vh替代min-height:100vh，从根源上限制容器高度等于视口，避免溢出可能。
• 调整图片的flex属性为flex:1 1 auto，让图片在有剩余空间时扩展、空间不足时收缩，配合max-height:100%确保不会超出容器范围。
• 给.greet添加flex-shrink:0，保证提示文本区域的高度稳定，不被flex布局压缩。

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