CSS Flexbox：解决大图片导致全屏布局溢出的问题

修改后的CSS代码 #

body {
    margin: 0;
}

main {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
    max-height: 100vh;
    max-width: 100vw;
}

#sidebar {
    background-color: tomato;
    width: 330px;
}

#main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#main_header {
    background-color: aqua;
}

#main_contents {
    background-color: burlywood;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#main_contents img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

问题原因与解决逻辑 #

• Safari对Flex布局的min-height规则处理存在特殊性：列方向的Flex容器中，flex:1的子元素默认min-height:auto，这会导致子元素被内部大图片撑开高度，超出父容器的100vh限制，最终触发页面底部滚动条。
• 给#main和#main_contents添加min-height:0，强制限制它们的高度不会超出父容器分配的空间，让图片的max-height:100%规则正常生效。
• overflow:hidden用于隐藏图片超出容器的部分；若需要查看完整图片，可替换为overflow:auto让图片区域独立滚动。
• object-fit:contain是可选优化，确保图片保持原始比例完整显示，避免拉伸变形。

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