Bootstrap: input groups are broken when using flexbox

[itised]

If $enable-flex is set to true, input-group-addons shrink to their minimum size and content overflows out of them.

[cvrebert]

In which browser(s)?

[itised]

Safari 9.0 and Chrome 45, both on OS X 10.11.

I also just checked Firefox 41, and it has the opposite problem. In Firefox, the addons are much wider than they should be. They are also shorter than the inputs they are attached to.

Again, this is only when $enable-flex is set to true. If $enable-flex is false, all 3 browsers behave as expected.

[DanCouper]

+1 on this, specifically FireFox. This is the behavior I'm getting at the minute (the green dashed lines are where the edges of the a grid columns are) -

In Firefox (42 and 44.0a2):

In Chrome (47, correct behaviour):

As above, it's a flex issue; if I turn off flex it works universally. I assume it's related to how FF interprets the Flexbox spec, I'll do more isolated testing

Markup is this, I can't see any errors in structuring as per Bootstrap:

<fieldset class="form-group">
  <label class="sr-only" for="basket_lines_attributes_0_quantity">Quantity</label>
  <div class="input-group">
    <span class="input-group-btn">
      <button name="button" type="submit" class="btn btn-primary"><i class="fa fa-minus"></i></button>
    </span>
    <input value="1" class="form-control" name="basket[lines_attributes][0][quantity]" id="basket_lines_attributes_0_quantity" type="text">
    <span class="input-group-btn">
      <button name="button" type="submit" class="btn btn-primary"><i class="fa fa-plus"></i></button>
    </span>
  </div>
</fieldset>

EDIT

This is a very specific fix, I needed to apply it to a specific element, and I need to make a series of different usecases before I can think about PRing, but it's not a bug according to Mozillas bug tracker, Chrome et al just implement the spec incorrectly:

https://bugzilla.mozilla.org/show_bug.cgi?id=1108514

Applying min-width: 0 to my input fixes the problem immediately -

[garlian]

+1

[mdo]

_Should_ be fixed now that #17756 is merged. Holler if it's still broken though and we can re-open.

[wnr]

Seems to me that this issue is still around. I tried it with exampleInputAmount in the docs components/forms/ locally with flex turned on @ commit 0416f761dddae04a1b4d3ce70afece518330ca4d.

Applying min-width: 0 seems to fix it indeed.

[reisub-de]

This bug is still there in v4.0.0-alpha.4

[tharunsaik]

you can simply add this default bootstrap grid CSS

.input-group { border-collapse: separate; display: table; } .input-group .form-control, .input-group-addon, .input-group-btn { display: table-cell; }

[DanCouper]

@tharunsaik removing flex isn't a solution the described problem, using display:table/table-cell simply [re]introduces a different set of problems (doing what you suggest immediately removes all the benefits of using flex just to solve a single specific issue). It happens due to Chrome's interpretation of the flex spec, and a possible solution is described above.

[mdo]

This is fixed y'all :).