CSS Flex子元素无法撑满父元素宽度的原因及解决方法

原因 #

1. 父容器banner-link的flex配置：banner-link是flex容器且设置了justify-content: center，这会让子元素banner-content在主轴方向居中，而banner-content默认flex-grow: 0，不会主动扩展填充父容器的剩余空间。
2. banner-content的宽度默认规则：banner-content作为flex容器，未设置宽度相关属性时，宽度由内部内容决定，不会自动继承父容器的100%宽度。

解决方案 #

方案一：转移居中逻辑并强制设置宽度

将居中样式从父容器移到banner-content，同时让它占满父容器宽度：

.banner-link {
  display: flex;
  height: 100%;
  text-decoration: none;
  width: 100%; /* 确保父容器占满横幅宽度 */
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: center; /* 内部内容居中 */
  width: 100%; /* 撑满父容器宽度 */
}

方案二：利用flex-grow属性扩展宽度

如果需要保留banner-link的justify-content: center，可以通过flex-grow让banner-content自动填充空间：

.banner-link {
  display: flex;
  justify-content: center;
  height: 100%;
  text-decoration: none;
  width: 100%;
}

.banner-content {
  display: flex;
  align-items: center;
  flex-grow: 1; /* 填充父容器剩余空间 */
  max-width: 100%; /* 避免内容溢出时宽度超出父容器 */
}

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