flex-grow-1

bootstrap5.css

.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

html bootstrap5 Sample

flexの幅を伸縮で埋める機能：flex-grow

flex文字01（flex-grow-1）

flex文字02

flex文字03

  <div class="d-flex" style="height: 100px">
    <!--flex文字の幅を伸長で調整する(残り全部） -->
    <div class="p-2 flex-grow-1">flex文字01（flex-grow-1）</div>
    <div class="p-2">flex文字02</div>
    <div class="p-2">flex文字03</div>
  </div>