为何三个子元素均设置flex:1属性却无法保持相同尺寸？

核心原因 #

浏览器为<button>元素预设了默认样式（包括内边距、边框），同时flex布局中，子元素默认的min-width: auto规则会阻止元素收缩到小于自身内容的最小宽度。直接作为flex子元素的button，其默认样式+内容的最小宽度，比另外两个被div包裹的子元素更大，因此即使设置了flex:1，它也无法被压缩到与另外两个元素相等的宽度。

解决方案 #

方案1：取消flex子元素的最小宽度限制 #

给所有.hijo类添加min-width: 0，打破默认的最小宽度限制，让元素可以自由收缩以平分父容器宽度：

* {
  box-sizing: border-box;
}

.padre {
  width: 200px;
  background-color: red;
  display: flex;
}

.hijo {
  flex: 1;
  min-width: 0; /* 新增：允许元素收缩到小于内容宽度 */
}

方案2：重置button的默认样式 #

移除button的默认内边距、边框等样式，让它的内在尺寸与div保持一致，从而实现宽度平分：

* {
  box-sizing: border-box;
}

.padre {
  width: 200px;
  background-color: red;
  display: flex;
}

.hijo {
  flex: 1;
}

/* 重置button的默认UA样式 */
.hijo:is(button) {
  padding: 0;
  border: none;
  background-color: transparent;
  /* 若需要保留按钮外观，可按需调整上述属性 */
}

内容的提问来源于stack exchange，提问作者Sergio Rolando Martínez