HTML表格中flex容器内input在Firefox下宽度不生效问题

问题背景 #

在表格单元格内，存在一个设置了display:flex且固定宽度的容器，容器内的input元素仅配置了overflow:hidden。此时Chrome会自动将input收缩至容器宽度，但Firefox不会——input会保持自身内容宽度，超出容器范围。虽然添加width:100%能让Firefox正常显示，但需求是不使用该样式。

注：已向Firefox官方反馈此差异，官方判定该表现为正确行为，并非Bug。

解决方案 #

方案1：为Input添加flex: 1 #

利用flex布局的子元素属性，让input占据容器的可用空间，同时保留overflow:hidden截断超出内容：

div {
  display: flex;
  width: 50px;
}

.myInput {
  overflow: hidden;
  flex: 1; /* 关键属性 */
}

方案2：为Flex容器添加min-width: 0 #

Firefox中flex容器的子元素默认min-width:auto，会优先保留内容宽度。给容器设置min-width:0后，子元素可收缩至容器宽度范围内：

div {
  display: flex;
  width: 50px;
  min-width: 0; /* 关键属性 */
}

.myInput {
  overflow: hidden;
}

方案3：为Input设置min-width: 0 #

直接给input设置min-width:0，打破其默认最小宽度限制，使其能跟随容器宽度收缩：

div {
  display: flex;
  width: 50px;
}

.myInput {
  overflow: hidden;
  min-width: 0; /* 关键属性 */
}

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