图片设百分比尺寸时Header整体可点击的问题解决咨询

我在header内的锚点链接<a>中放置了一张图片，用像素设置图片尺寸时，仅图片区域可点击（符合预期）；但用百分比设置时，整个header都变成可点击状态，请问如何阻止这种情况？

现有代码 #

CSS 代码

header {
  display: flex;
  justify-content: space-between;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.container {
  position: relative;
  padding: 0 15px;
  margin: 0 auto;
}

header a {
  display: flex;
  color: #000000;
  text-decoration: none;
}

header a img {
  vertical-align: middle;
}

header button {
  width: 32px;
  height: 32px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  padding: 0;
  line-height: 34px;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -16px;
}

header button svg {
  width: 9px;
  height: auto;
}

HTML 代码

<header class="container">
  <a class="logo" href="index.html">
    <img width="10%" src="img/logo.png" alt="Logo">
  </a>
  <button>
            <svg element></svg>
        </button>
</header>

解决办法 #

问题根源在于flex布局的默认拉伸行为：
header是flex容器，里面的<a>标签设置了display: flex，而flex子元素默认align-self: stretch，会自动填满容器的交叉轴空间；再加上图片用百分比宽度时，<a>会自动扩展宽度，最终导致整个header区域都被<a>覆盖，变成可点击状态。

你可以任选以下一种方法修复：

1. 给<a>添加align-self: flex-start，阻止它拉伸填满header：

header a {
  display: flex;
  color: #000000;
  text-decoration: none;
  align-self: flex-start; /* 新增这行 */
}

2. 给<a>设置width: fit-content，限制宽度为内容实际需要的尺寸：

header a {
  display: flex;
  color: #000000;
  text-decoration: none;
  width: fit-content; /* 新增这行 */
}

3. 把<a>的display: flex改成inline-block，让它只包裹内部图片区域：

header a {
  display: inline-block; /* 替换原有的display: flex */
  color: #000000;
  text-decoration: none;
}

以上三种方法都能让<a>只占据图片所在的区域，不会扩展到整个header。

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