Button内容无法随Flex Box拉伸？同display属性下与Div的差异问询

关键差异：元素类型的内置盒模型特性 #

Button是表单控件类元素，和普通块级Div的默认尺寸计算逻辑天生不同——即使你用all: unset重置样式，有些浏览器内置的元素特性还是会影响它的行为：

• Div的默认行为：作为块级元素，width: auto会自动填充父容器的可用宽度，所以设置display: flex后，它会占满父容器的300px宽度，内部flex子元素可以正常用space-between分散对齐。
• Button的默认行为：作为表单元素，它的width: auto是收缩包裹内容，哪怕改成display: flex，它的基础尺寸还是由内部内容决定，不会自动拉伸到父容器宽度——这就是示例里Button只包裹hello2和world，而Div占满橙色容器的原因。

all: unset没覆盖的隐藏规则 #

all: unset能重置绝大多数CSS属性，但浏览器对Button这类表单元素有深层的内置样式逻辑，比如：

• 部分浏览器会给Button保留特殊的内在尺寸计算规则，不是普通块级元素的盒模型逻辑；
• Button的width: auto计算优先级和Div不同，Div优先填充可用空间，Button优先收缩到内容宽度。

为什么min-width: 100%会导致溢出？ #

当你给Button加min-width: 100%，它的宽度被强制设为父容器的300px，但你还加了margin-left: 8px，此时元素总宽度是300px + 8px，自然超出父容器。而Div作为块级元素，width: auto会自动减去margin的空间，所以不会溢出——这是两者尺寸计算逻辑的又一个差异。

让Button和Div表现一致的解决方法 #

如果你想让Button和Div的flex布局效果完全相同，可以：

• 用width: calc(100% - 8px)替代min-width: 100%，自动减去margin的宽度，避免溢出；
• 确保box-sizing: border-box生效，防止padding或border影响宽度计算。

修改后的CSS示例：

.test {
  background: orange;
  width: 300px;
}

.test2 {
  all: unset;
  margin-left: 8px;
  display: flex;
  justify-content: space-between;
  width: calc(100% - 8px);
  box-sizing: border-box;
}

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