Firefox, Flexbox & overflow

Question

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

• In chromium:

Answer 1

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

  

    123