input-group elements are NOT responsive

Expected behavior: When a <div class="input-group"> is rendered within a responsive element it should flex to fill the element.

Actual behavior: When a <div class="input-group"> is rendered within a responsive element it stays at a fixed, minimum, size.

Example: Take the example code for the search input-group and throw it in a card. I have tested with your snippet editor, it is not my custom code.

<div class="col-12">
  <div class="card mb-3">
    <div class="card-body">
      <form method="post" class="form-horizontal">
        <div class="input-group">
          <div class="form-outline">
            <input type="search" id="form1" class="form-control"/>
            <label class="form-label" for="form1">Search</label>
          </div>
          <button type="button" class="btn btn-primary">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

Despite my best efforts I haven't been able to find a way to correct this behavior and have had to disable input-group elements for now.