Firefox,Flexbox和溢出

Question

在上次firefox-update之后,一些css3代码被破坏了...... 例子(jsfiddle).

• 在铬中:
• 在Firefox 34中:

是bug吗？还是正常工作？我需要改变什么来修复它？为什么#flex不适当调整大小？

HTML:

<div id="outer">
    <div id="flex">
        <label>123</label>
        <input type="text" value="some text" />
    </div>
</div>  

CSS:

#outer { display: flex; }

#flex {
    display: flex;
    border: 1px solid green;
    outline: 1px solid red;
}

label { flex: 0 0 80px; }

Answer 1

固定:

input { min-width: 1px; }

对于垂直方向 - min-height;

Answer 2

Firefox 34中存在一个错误.其中一个元素不能很好地作为flex子项播放,输入似乎太宽.Flex容器绿色边框不考虑这个额外的宽度.

这可以确认为一个错误,因为在Firefox 33.1(和Chrome/IE)中,您的示例没有问题:

您的示例Firefox 33.1

您的示例Firefox 34.0.5 - Flex容器错误地计算了输入宽度,并且输入本身的宽度不能更小.

作为解决方法,我们可以在标签上设置宽度; 容器可以识别此宽度,并且在Firefox 34中防止了错误.为了仅在Firefox中使用,我们可以使用-moz-带有calc 的前缀来设置宽度:

label {
    width: -moz-calc(80px);
}

(显然以前版本的Firefox也会识别这个宽度)

错误解决方法示例

使用inline-flex

从您的示例中,您可能希望使用inline-flex它来将表单的宽度包含在其子项的宽度中.我已经使用了这个并删除了不再需要的额外div.每个浏览器的输入宽度存在很大差异(这与您的问题中的示例一致).

Firefox 33

Firefox 34

铬

IE11

form {
  display: inline-flex;
  border: solid 1px green;
  outline: 1px solid red;
}
label {
  flex: 0 0 80px;
  width: -moz-calc(80px);
}

<form>
  <label>123</label>
  <input type="text" value="some text" />
</form>

Answer 3

与变体

min-width: 0

也可以