Flex子项为何会溢出Flex容器？

我帮你排查了这个布局问题，这其实是Flex布局里一个非常常见的“坑”——Flex子项的默认最小尺寸限制在搞鬼！

问题根源 #

在flex-direction: row的Flex布局中，所有子元素的默认min-width值是auto，简单说就是：子项的宽度不能小于它内部内容的最小宽度。你的.email-form在大屏幕下会变成横向布局，里面的输入框和按钮各自都有“保底”的最小宽度（比如按钮里的文字+图标+内边距、输入框的默认最小宽度），当Flex容器的空间被压缩到小于这两个子项的最小宽度之和时，子项就会直接溢出容器，而不是跟着收缩。

你之前尝试的flex: 1 1 0方向是对的，但因为min-width: auto的限制，Flex的收缩属性根本没法生效，所以才没解决问题。

修复方案 #

这里给你两个直接有效的解决办法，根据你的需求选就行：

方案一：突破子项的最小宽度限制（推荐，保持横向布局）

给.email-input和.email-submit加上min-width: 0，让它们可以突破默认的最小宽度限制，跟着Flex容器一起收缩：

.email-input,
.email-submit {
  min-width: 0;
}

如果想更精准，也可以单独给输入框加（因为按钮的内容宽度比较固定，输入框是主要需要收缩的元素）。

方案二：允许子项换行（备选，适配极小屏幕）

如果允许在空间不足时自动换行，给.email-form加上flex-wrap: wrap，这样在容器空间不够时，输入框和按钮会自动上下排列，避免溢出：

.email-form {
  flex-wrap: wrap;
}

额外优化小提示 #

如果担心按钮在极端窄屏里文字显示不全，可以给按钮加个文字溢出处理：

.email-submit {
  overflow: hidden;
  text-overflow: ellipsis;
}

不过你的按钮文字不长，这个属于可选优化~

备注：内容来源于stack exchange，提问作者jcubic