Chrome中Flexbox子元素height:100%不生效问题咨询

这个问题是Chrome 76及部分版本的flex布局处理差异导致的：当你给flex容器（也就是这里的<button>）设置了align-items: center时，Chrome的布局引擎会让子元素的高度收缩以适配自身内容，此时子元素的height: 100%无法正确继承容器的高度；而Firefox和Edge在该场景下的布局逻辑不同，允许子元素用height: 100%填充容器高度。

修复方案（任选其一即可） #

方案1：给蓝色区块添加align-self: stretch

这个属性会强制子元素在flex容器的交叉轴（此处为垂直方向）上拉伸，直接填满容器高度，完全不需要依赖height: 100%：

button {
  background: red;
  height: 55px;
  display: flex;
  align-items: center;
}
.el {
  display: block;
  background: blue;
  align-self: stretch; /* 新增关键属性 */
  /* 如果需要蓝色区块内的文字垂直居中，可补充以下两行 */
  display: flex;
  align-items: center;
}

方案2：移除align-items: center，改用padding实现垂直居中

如果不需要按钮内其他元素（比如示例里的"Other"文本）强制垂直居中，也可以去掉容器的align-items: center，通过给按钮设置上下padding来实现内容的垂直分布，此时height: 100%就能正常生效：

button {
  background: red;
  padding: 0 10px; /* 左右padding可按需调整 */
  display: flex;
  /* 移除align-items: center */
}
.el {
  display: block;
  background: blue;
  height: 100%;
}

方案3：用height: inherit替代height: 100%

直接让蓝色区块继承按钮的固定高度，绕过flex布局的高度计算差异：

button {
  background: red;
  height: 55px;
  display: flex;
  align-items: center;
}
.el {
  display: block;
  background: blue;
  height: inherit; /* 替换原有的height: 100% */
}

这些方案都能解决Chrome中蓝色区块无法填满按钮高度的问题，你可以根据自身布局需求选择最合适的一种。

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