Firefox, Flexbox & overflow

Question

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

• In chromium:
• In firefox 34:

Is it bug? Or normal working? What do i need to change to fix it? Why #flex don't resize properly?

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

Fix:

input { min-width: 1px; }

For vertical direction - min-height;

Answer 2

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

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

Answer 3

variant with

min-width: 0

also works

Answer 4

What you could do is, subtract 80px from 100% and set that a width for input. Additionally, add box-sizing: border-box to prevent overflow.

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 needs to be on the container that needs to be flexible, not the inner elements. Here's the updated CSS, if you need a specific width, you can set that on form {}.

CSS

form {}

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

#flex > * {
    flex: 1;
}

label {}

input {}