如何阻止包含hover展开隐藏内容的project div高度过度扩张

问题核心原因 #

• .handoverExpanded仅设置height:0但未添加overflow: hidden，内部子元素的margin、padding仍会溢出容器占用高度，是默认高度超标的主要原因
• CSS存在冲突规则：你前期写的display: none切换逻辑和后期的height过渡规则冲突，也会干扰父容器高度计算
• .project的min-height默认设置为300px，数值大于你期望的默认高度

解决方案 #

按以下步骤修改CSS即可：

1. 修正.handoverExpanded基础样式，添加溢出隐藏，删除冲突的display控制规则：

.handoverExpanded {
    height: 0px;
    overflow: hidden; /* 新增该行，隐藏高度为0时的内部内容，避免占用空间 */
    -webkit-transition: height 0.5s linear;
    -moz-transition: height 0.5s linear;
    -ms-transition: height 0.5s linear;
    -o-transition: height 0.5s linear;
    transition: height 0.5s linear;
}

同时删除以下两行冲突代码：

.handoverExpanded { display: none; }
.projectTitle:hover > .handoverExpanded { display: block; }

2. 调整.project的min-height数值为你期望的默认最小高度，比如修改为min-height: 180px，可根据实际视觉效果调整数值即可，该属性不会限制内容展开后的高度，符合你要保留min-height的要求。

可选优化（非必须） #

你当前用position: inherit加bottom偏移排列四个.projectTitle的写法不稳定，容易出现高度计算偏差，建议改为给.project添加display: flex; justify-content: space-around; align-items: flex-start;来横向排列四个卡片，布局更稳定。

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