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)

I just checked the given JSFiddle with Firefox and it looks fine to me. What is your Firefox version? — Sasindu Mendis, Jan 13 '16 at 10:59
For anyone running into this issue for another reason, the solution is here: https://stackoverflow.com/a/43361500/2873507 — Vic Seedoubleyew, Jul 19 '19 at 12:42

Michael Benjamin · Accepted Answer · 2016-01-13T12:06:47.533

8

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.

edited Jan 13 '16 at 12:06

answered Jan 13 '16 at 11:53

Michael Benjamin

346,931
104
581
701

1

Simple as that! Thanks, I think I was focusing too much on CSS and assumed it was one of several Firefox flexbox bugs as I've just got to the bottom of this issue: http://stackoverflow.com/questions/27597870/using-display-flex-on-a-button-makes-it-wrap-in-firefox – do_you_realise Jan 13 '16 at 11:56
BTW, in the demos above, Chrome overflows as well if you get rid of `width:100%` from the inputs. Chrome seems to be treating that percent-width as clamping the width to a greater extent than it actually should. I filed https://bugs.chromium.org/p/chromium/issues/detail?id=785041 on this. – dholbert Nov 14 '17 at 23:06
Note that in addition to the solution above the default size attribute on an input field is 20. You can specify the width to 1 (this will only be a default and be overridden by the CSS" example: this input has a default size of 20 and could affect the width of the input field. – Mike Nov 05 '18 at 18:37
5

Another solution is to set `min-width` to 0 in the CSS. – Scott Feb 28 '19 at 16:10

score 8 · Answer 2 · answered Sep 11 '20 at 16:40

8

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

answered Sep 11 '20 at 16:40

Naresh Nagpal

299
4
6

1

this fixed the problem for me ! thanks for sharing the answer, I would have never thought of that, and still have no clue why it worked. – shehata Sep 19 '20 at 01:01
This fixed the same issue for me, any idea why that is? – jonnow Oct 15 '21 at 09:13

Input controls overflowing flex container in Firefox

2 Answers2