Input controls overflowing flex container in Firefox

Try using "min-width: 0" for inputbox. T This generally happens in Mozilla when using flex. Try using "min-width: 0" for input box.

By adding a border around the flex container, the problem can be seen in Firefox:

DEMO 1

It appears that the primary reason for the overflow is the size attribute in the input elements.

<input class="string optional form-control group_item" maxlength="255" size="255"
      type="text" name="user[name]" id="user_name" />

The size="255" is setting the size of the control which, depending on the browser, may conflict with the size you set in the CSS. By removing this attribute and letting CSS manage the width, the problem seems to be resolved:

DEMO 2

Note that the size attribute controls only the size of the input. It does not affect the number of characters you can enter, which is controlled by the maxlength attribute (also present in your code).

For example:

<input type="text" size="5" maxlength="20" >

In the code above, the control will be five characters in width (unless overridden by CSS), but can accept up to 20 characters.

More details on the size and maxlength attributes can be found here: MDN <input> definition.