如何阻止display: flex改变子元素的高度？

问题原因 #

当<div>处于默认的display: block状态时，内部的<a>是行内元素，它的上下内边距不会完全纳入容器的高度计算（行内元素的高度由line-height主导）；而切换到display: flex后，<a>会被自动转为块级弹性子项，上下内边距会被完整计算进容器高度，这就导致了高度在22px和26px之间的波动。

解决方案 #

让<a>在两种状态下的盒模型表现一致即可，推荐两种方法：

方法1：统一<a>的盒模型类型 #

给<a>添加display: inline-block，无论父容器是block还是flex，它的内边距都会被正常计算，高度保持统一：

.root {
  display: flex;
}

a {
  padding: 0.125rem;
  display: inline-block; /* 关键属性 */
}

方法2：给父容器固定高度（适合高度已知的场景） #

如果容器高度是固定值，直接给.root设置height，强制锁定高度：

.root {
  display: flex;
  height: 22px; /* 匹配初始block状态的高度 */
}

a {
  padding: 0.125rem;
}

验证效果 #

修改后切换display: flex样式，容器高度将保持稳定，不会再出现波动。

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