Flex子元素高度应由min-height设定底线并允许自然撑开，align-items仅控制交叉轴对齐而不决定高度；默认stretch会拉伸无高度设置的子元素，需结合父容器高度与align-items:flex-start避免意外拉伸。
子元素高度随内容变化是 Flex 布局的默认行为，本身不是问题——但若希望它“有底线”又“不僵硬”，关键在于合理组合 align-items 和 min-height，而不是依赖 height 强制拉伸。
align-items 控制的是交叉轴对齐方式，不直接决定高度
align-items（如 flex-start、center、stretch）只影响子元素在交叉轴（通常是垂直方向）上的定位，并不改变其自然高度。特别注意：默认值是 stretch，这意味着：如果子元素没设高度、也没设 min-height，且父容器在交叉轴上有明确尺寸（比如设置了 height 或被限制在某个高度内），子元素会被“拉伸”填满父容器交叉轴空间。
所以如果你发现子元素莫名其妙变高了，先检查：
- 父容器是否设置了固定
height或max-height - 子元素是否没设
min-height却又启用了align-items: stretch（默认） - 子元素内部是否有
display: flex或其他布局干扰了自身高度计算
用 min-height 替代 height，守住最低视觉底线
当希望子元素“至少显示一行文字/一个图标/一段操作区”，但又允许内容增多时自然撑开，min-height 是最稳妥的选择。它和 Flex 兼容性好，不会破坏弹性行为。
立即学习“前端免费学习笔记（深入）”；
示例：
.container {
display: flex;
flex-direction: column;
}
.item {
min-height: 48px; /* 至少 48px 高，内容多就自动变高 */
padding: 12px 16px;
border: 1px solid #eee;
}这样既保证了最小可点击区域，又保留了响应式呼吸感。
配合 align-items: flex-start 避免意外拉伸
如果父容器有固定高度（比如卡片固定为 200px），而你又不希望子元素被 stretch 拉满，只需显式设置：
.container {
display: flex;
height: 200px;
align-items: flex-start; /* 关键：不再拉伸子项 */
}
.item {
min-height: 40px; /* 内容少时保持最小高度，多时向上生长 */
}此时子元素从顶部开始排列，高度完全由自身内容 + min-height 决定，不会侵占多余空间。
特殊情况：需要等高但又不想内容被裁剪
若多个子元素需视觉上“等高”（比如并排的卡片），但又不能靠 align-items: stretch 强制拉伸导致文字溢出或按钮错位，推荐：
- 给所有子元素统一设
min-height（如min-height: 120px） - 内部内容用
flex-direction: column+justify-content: space-between控制头部、主体、底部间距 - 文字区域加
overflow: hidden+text-overflow: ellipsis防止撑破
这样既保持视觉整齐，又兼顾内容自适应。
