HTML Button包含响应式子元素时尺寸适配异常问题求解

问题根因 #

<button> 是浏览器预设了交互样式的特殊内置标签，和普通<div>的默认布局规则有差异：浏览器为<button>内置了最小高度限制、默认内容布局逻辑，会覆盖flex布局下跟随子元素计算高度的规则，无法正确识别子元素通过伪元素padding-top撑开的响应式比例高度，所以出现和div表现不一致的问题。

修复方案 #

直接在原有的.container样式中新增2行属性即可，无需修改HTML结构，也不用更换为div绑定点击事件：

.container {
  border: 1px solid black;
  padding: 5px;
  display: flex;
  flex-direction: column;
  /* 新增以下两行修复button适配问题 */
  appearance: none;
  height: fit-content;
}

如果需要保留button的默认边框、点击反馈等原生样式，也可以单独给button类型的容器加样式：

button.container {
  appearance: none;
  height: fit-content;
}

修改后button的尺寸表现就会和div完全一致，同时还能保留原生button的可访问性特性，支持tab聚焦、键盘回车/空格触发点击等能力。

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