为何无类名的HTML div会改变Flex布局的显示格式？

初始代码与效果 #

<html>
    <head>
        <style>
            .container {
                display: flex;
                flex-direction: column;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <button>Button 1</button>
            <button>Button 2</button>
        </div>
    </body>
</html>

这段代码会生成一列占据窗口宽度的两个按钮：

修改后的代码与异常效果 #

给第一个按钮套上无类名div后，代码变为：

<html>
    <head>
        <style>
            .container {
                display: flex;
                flex-direction: column;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div><button>Button 1</button></div>
            <button>Button 2</button>
        </div>
    </body>
</html>

原本预期布局不变，但实际第一个按钮不再占满窗口宽度：

问题原因 #

核心在于Flex容器中直接子元素的默认行为差异：

• 当<button>是.container的直接子元素时，它作为Flex项，默认align-self值为stretch，会自动拉伸填满容器的横向空间（因为flex-direction: column时，主轴是纵向，交叉轴是横向），再加上按钮本身的盒模型特性，最终呈现占满窗口宽度的效果。
• 用无类名<div>包裹按钮后，这个<div>变成了Flex容器的直接子元素。虽然<div>的默认align-self也是stretch，会占满容器横向空间，但里面的<button>不再是Flex项，它会恢复自身默认行为——仅根据内容宽度展示，不会自动拉伸填满父级<div>的宽度，所以视觉上就出现了“收缩”的变化。

简单总结：原来按钮是Flex项，被拉满宽度；现在按钮的父div是Flex项（div拉满宽度），但按钮自己只占内容宽度，所以看起来变窄了。

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