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?