固定高度nav-bar中图片溢出div问题：求原因及解决方案

问题原因 #

1. 未正确启用Flex布局：你的.nav-bar仅设置了justify-content: space-between，但缺少display: flex属性（HTML中的flex类未在CSS中定义），导致它并非真正的Flex容器，子元素以默认布局排列，引发溢出问题。
2. 图片未被高度约束：图片作为替换元素默认保留自身尺寸，其父容器.header-img未限制高度，即使启用Flex布局，若未设置对齐规则或图片尺寸约束，图片也可能超出.nav-bar的固定高度。

解决方案 #

1. 启用Flex容器 #

给.nav-bar添加display: flex，同时设置align-items: center让子元素垂直居中，避免内容偏移溢出：

.nav-bar{
    height:160px;
    width:100%;
    border:1px red solid;
    position:fixed;
    display: flex; /* 启用Flex布局 */
    justify-content:space-between;
    align-items: center; /* 垂直居中子元素 */
}

2. 约束图片高度 #

通过设置图片容器和图片的高度规则，确保图片不超出.nav-bar的高度：

.header-img{
    border:1px blue solid;
    height: 100%; /* 让容器占满导航栏高度 */
}
.header-img img{
    max-height: 100%; /* 图片最大高度不超过父容器 */
    width: auto; /* 保持图片宽高比 */
}

3. 优化Flex子项（可选） #

若导航列表、搜索框等子元素存在溢出风险，可添加收缩规则和溢出隐藏：

.header-list, .search{
    flex-shrink: 1; /* 允许子项在空间不足时收缩 */
    overflow: hidden; /* 隐藏溢出内容 */
}

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