V4 input-group inside btn-toolbar requires fixed width

[bpierson]

Possibly this is the expected behavior, but when adding an input-group to a btn-toolbar (which appears to be common usage, since it is specifically accounted for in bootstrap.css), an input-group will always go to full width and wrap to the next line, unless it is assigned a fixed width.

As I said, this might be expected behavior, but is not documented (that I could find).

Fiddle

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group" role="group">
        <button class="btn-secondary btn" type="button">
            <span>One</span>
        </button>
        <button class="btn-secondary btn" type="button">
            <span>Two</span>
        </button>
    </div>
    <!-- ADD style="width: 500px;" or some other fixed width to fix wrapping. width: auto does not work. -->
    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-info" title="clear search" type="button">
                <i class="fa-fw fa-times fa"></i>
            </button>
        </span>
        <input class="form-control" spellcheck="false" type="text" />
        <div class="input-group-btn" role="group">
            <button class="btn btn-info" type="button">
                <i class="fa-fw fa-search fa"></i>
            </button>
            <button aria-haspopup="true" class="btn-info dropdown-toggle btn" data-toggle="dropdown" type="button"></button>
            <div class="dropdown-menu-right dropdown-menu" role="menu">
                <a class="dropdown-item" href="#">Help on Search</a>
                <div class="dropdown-divider"></div>
                <div class="dropdown-header">STORED SEARCHES</div>
                <a class="dropdown-item" href="#">This and That</a>
                <a class="dropdown-item" href="#">Last Week</a>
                <a class="dropdown-item" href="#">Closed Only</a>
            </div>
        </div>
    </div>
</div>