Html Firefox中的输入控件溢出flex容器

我在Firefox（在Chrome中很好）上遇到了flexbox输入组的问题-选择输入将文本输入推出容器

我提取了一些标记并复制了以下相关样式：

.column.names{
宽度：48%；
浮动：左；
}
挑选{
最小宽度：6em；
对齐项目：居中；
证明内容：中心；
宽度：7em；
}
输入{
宽度：100%；
}
.输入组{
显示器：flex；
}

名称
先生
夫人
其他
单位

通过在flex容器周围添加边框，可以在Firefox中看到问题：

溢出的主要原因似乎是

input

元素中的

size

属性

<input class="string optional form-control group_item" maxlength="255" size="255"
      type="text" name="user[name]" id="user_name" />

在上面的代码中，控件的宽度为5个字符（除非被CSS覆盖），但最多可以接受20个字符

有关

大小

和

最大长度

属性的更多详细信息，请参见此处：。

尝试使用“最小宽度：0”作为输入框。T

---

这通常发生在Mozilla使用flex时。尝试使用“min width:0”作为输入框。

我刚刚用Firefox检查了给定的JSFIDLE，我觉得很好。你的Firefox版本是什么？我可以在Firefox中重现这个问题。对于任何出于其他原因遇到这个问题的人，解决方案如下：就这么简单！谢谢，我认为我太关注CSS了，并认为这是Firefox flexbox的几个错误之一，因为我刚刚弄清了这个问题的真相：顺便说一句，在上面的演示中，如果你从输入中去掉

width:100%

，Chrome也会溢出。Chrome似乎将该百分比宽度视为比实际情况更大程度的夹紧宽度。请注意，除了上面的解决方案之外，输入字段的默认大小属性是20。您可以将宽度指定为1（这只是默认值，由CSS覆盖）"示例：此输入的默认大小为20，可能会影响输入字段的宽度。另一种解决方案是在CSS中将

min width

设置为0。这为我解决了问题！感谢分享答案，我从未想到过这一点，仍然不知道它为什么起作用。等等什么？谢谢！为我起作用但为什么。它起作用了谢谢！

<input type="text" size="5" maxlength="20" >