Input controls overflowing flex container in Firefox

Question

I'm having issues on Firefox (fine in Chrome) with a flexbox input group - the select input is pushing the text input out of the container.

I've extracted some of the markup and replicated the relevant styling below:

.column.names {
  width: 48%;
  float: left;
}
select {
  min-width: 6em;
  align-items: center;
  justify-content: center;
  width: 7em;
}
input {
  width: 100%;
}
.input_group {
  display: flex;
}

<div class='column names'>

  <div>
    <label for="user_name">Name</label>
    <div>
      <div class='input_group'>
        <select name="user[title]" id="user_title">
          <option value=""></option>
          <option selected="selected" value="Mr">Mr</option>
          <option value="Mrs">Mrs</option>
          <option value="Other">Other</option>
        </select>
        <input maxlength="255" size="255" type="text" name="user[name]" id="user_name" />
      </div>
    </div>
  </div>

  <div>
    <label for="user_company">Company</label>
    <div>
      <input maxlength="255" size="255" type="text" value="" name="user[company]" id="user_company" />
    </div>
  </div>

</div>

https://jsfiddle.net/j9s0fk8c/

To clarify, the Name select + input box combined should be the same width as the Company input box.

Again this has been fine in Chrome but for some reason flexbox is giving us no end of issues in Firefox (this is just one in a long line of weird issues we've had to deal with)

Answer 1

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.

Answer 2

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