input-group looks compressed and broken.
Created by: jenstroeger
(Mac OS Mojave 10.14.4, Chrome 74.0.3729.157)
Looking at the following code for an input-group
https://github.com/twbs/bootstrap/blob/2d6e086342a93a59ae8abeb17460e9fab50ec267/scss/_input-group.scss#L7-L30
there are two interesting lines here: line 10 (flex-wrap: wrap
) and line 22 (width: 1%
) which seem to be the cause for the following rendering
And the code is
<div class="input-group input-group-sm">
<select class="custom-select" name="some-name">
…
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu vw-30 p-2">
…
</div>
</div>
</div>
I’ve fixed this by adding flex-wrap: nowrap
to the input group itself, and width: auto
to the select element further down in the cascade. But I am curious about why these two values were chosen in the first place? Shouldn’t the flex-wrap
be at least nowrap
to ensure that an input group doesn’t break visually?