Firefox, Flexbox & overflow

Question

After last firefox-update some of css3-code has been broken... Example (jsfiddle).

• In chromium:

Answer 1

There is a bug in Firefox 34. One of the elements is not playing nicely as a flex child, and the input seems to be too wide. This extra width is not taken into account by the flex containers green border.

---

This can be confirmed as a bug because in Firefox 33.1 (and Chrome / IE) there is no problem with your example:

Your Example Firefox 33.1

Your Example Firefox 34.0.5 — The input width is miscalculated by the flex container and the input itself cannot be given a smaller width.

---

As a workaround, we can set a width on the label; this width is recognised by the container and the bug is prevented in Firefox 34. In order to be used only in Firefox, we can set the width using the -moz- prefix with calc:

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

(Obviously previous versions of Firefox will also recognise this width)

Bug Workaround Example

Using inline-flex

From your example, it looks like you want to use inline-flex in order to contain the width of the form to the width of its children. I have used this and removed the extra div that is no longer needed. There is a big difference in input widths per browser (this is consistent with the example in your question).

Firefox 33

Firefox 34

Chrome

IE11

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

  123