锚点作为Flex子项时，内部行内元素无法填充高度的原因与解决

先看第一个场景的代码：

.container {
   display: flex;
   background: red;
   align-items: center;
}
.inner {
   background: blue;
}

<div class="container">
  <a>
    <span class="inner">Test<span>
  </a>
</div>

这里蓝色背景的<span>填不满外层<a>的高度，flex容器的红色背景会从蓝色盒子下方露出来。

再看补充的无<span>场景，问题完全一致——<a>内部的文本和SVG填不满<a>的高度：

.container {
  display: flex;
  flex-direction: row;
  background: red;
}

svg {
  height: 1em;
}

<div class="container">
  <a>
  Test
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-1px " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="display: inline-block;"><path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
  </a>
</div>

从Chrome DevTools里能看到，<a>内的文本并没有撑满整个<a>的高度。

为什么会出现这种情况？ #

1. Flex容器的子元素特性：<a>默认是行内元素，虽然flex容器会把它当作flex项处理，但它自身的内部布局还是行内流——内部的行内/行内块元素（比如<span>、文本、SVG）只会占据自身内容需要的高度，不会自动填充<a>的高度。
2. 垂直对齐的影响：行内元素默认是基线对齐，这会导致<a>的高度被撑开（比如SVG的存在），但内部内容不会填满这个高度，就露出了底层的红色背景。

修复方法 #

方法1：把<a>改成flex容器 #

这是最稳妥的方案，让<a>的内部元素自动填充高度，还能灵活控制对齐：

.container a {
  display: flex;
  align-items: center; /* 可选，控制内部元素垂直居中 */
  height: 100%; /* 确保<a>占满flex容器的高度 */
}
/* 第一个场景里，给.inner加flex:1可以让它填满<a>的宽度 */
.inner {
  background: blue;
  flex: 1;
}

方法2：把元素改成块级 #

通过改变显示类型，让<a>和内部元素具备块级元素的填充特性：

/* 第一个场景的写法 */
.container a {
  display: block;
  height: 100%;
}
.inner {
  background: blue;
  display: block;
  height: 100%;
}

/* 补充场景的写法 */
.container a {
  display: block;
  height: 100%;
  display: flex; /* 或者用flex更方便对齐 */
  align-items: center;
}

方法3：调整垂直对齐（不改变显示类型） #

如果不想改元素类型，可以调整垂直对齐并强制设置高度，但兼容性和灵活性不如前两种：

.container a {
  vertical-align: top;
  height: 100%;
}
.inner {
  background: blue;
  height: 100%;
  vertical-align: top;
}

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