flexbox布局下flex-item元素hover效果高度未完全覆盖问题求助

• 父容器.media__header__add设置了align-items: center属性，子元素.media__header__add__new默认仅适配自身内容高度，垂直方向没有撑满父容器的可用空间，hover时背景色只能覆盖内容自身高度，上下会露出父容器的底色。
• 父容器额外设置了上下0.1rem的padding，进一步拉大了子元素边缘和父容器可视边缘的距离，加剧了背景覆盖不全的问题。

推荐以下两种可行修复方式，按需选择即可：

方式1：内边距转移（兼容性更好） #

将父容器的padding拆分到两个子元素上，保证两个可hover区域自身就包含内边距，hover时自然覆盖全高：

/* 移除父容器的全局padding */
.media .media__header .media__header__add {
  padding: 0;
}

/* 给Add new区域增加上下内边距，同时开启垂直居中保证内容对齐 */
.media .media__header .media__header__add .media__header__add__new {
  padding: 0.1rem 0.2rem 0.1rem 0.5rem;
  display: flex;
  align-items: center;
}

/* 给右侧按钮增加对应内边距和父容器原有padding一致 */
.media .media__header .media__header__add button {
  padding: 0.1rem;
}

方式2：子元素撑满父容器高度 #

移除父容器的padding后给Add new区域设置自动拉伸属性，让其高度自动匹配父容器高度：

/* 移除父容器的padding */
.media .media__header .media__header__add {
  padding: 0;
}

.media .media__header .media__header__add .media__header__add__new {
  /* 高度自动撑满父容器 */
  align-self: stretch;
  /* 内部内容垂直居中 */
  display: flex;
  align-items: center;
  /* 补充内边距和原有视觉效果一致 */
  padding: 0.1rem 0.2rem 0.1rem 0.5rem;
}

.media .media__header .media__header__add button {
  padding: 0.1rem;
}

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