Firefox，Flexbox＆amp;溢出

Question

在上次firefox-update之后，一些css3代码被破坏了...... Example（jsfiddle）。

• 铬：
• 在Firefox 34中：

是虫子吗？还是正常工作？我需要改变什么来修复它？为什么#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中使用，我们可以使用带有calc的-moz-前缀来设置宽度：

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

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

错误解决方法示例

使用inline-flex

从您的示例中，您似乎希望使用inline-flex以便将表单的宽度包含在其子项的宽度中。我已经使用了这个并删除了不再需要的额外div。 每个浏览器的输入宽度存在很大差异（这与您的问题中的示例一致）。

Firefox 33

Firefox 34

铬

IE11

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

变种

min-width: 0

也有效

Answer 4

您可以做的是，从80px中减去100%并为width设置input。另外，添加box-sizing: border-box以防止溢出。

＆＃13;

＆＃13;

form {
  display: flex;
}
#flex {
  display: flex;
  border: 1px solid green;
  outline: 1px solid red;
}
label {
  display: flex;
  flex: 0 0 80px;
}
input {
  width: calc(100% - 80px);
  box-sizing: border-box;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

Display: flex; 只需要需要灵活的容器，而不是内部元素。这是更新的CSS，如果您需要特定的宽度，可以在form {}上设置。

CSS

form {}

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

#flex > * {
    flex: 1;
}

label {}

input {}