Firefox、Flexbox 和溢出

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 child 不能很好地发挥作用，并且输入似乎太宽了。弹性容器的绿色边框没有考虑这个额外的宽度。

---

这可以确认为错误，因为在 Firefox 33.1（和 Chrome / IE）中，您的示例没有问题：

您的示例 Firefox 33.1

您的示例 Firefox 34.0.5 — 输入宽度被 flex 容器计算错误，输入本身不能被赋予更小的宽度。

---

作为一种解决方法，我们可以在标签上设置宽度；这个宽度被容器识别，并且在 Firefox 34 中防止了该错误。为了仅在 Firefox 中使用，我们可以使用带有 calc 的 -moz- 前缀来设置宽度：

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

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

Bug 解决方法示例

使用 inline-flex

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

火狐 33

火狐 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

也可以

Answer 4

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

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;
}

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

Answer 5

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

CSS

form {}

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

#flex > * {
    flex: 1;
}

label {}

input {}