flex-shrink-1

bootstrap5.css

.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important;
}

html bootstrap5 Sample

flexの幅を縮小で調整する（他を優先）：flex-shrink

flex文字01（flex-shrink-1）

flex文字02

flex文字03

  <!-- flex文字の幅を縮小で調整する -->
  <div class="d-flex" style="height: 100px">
    <div class="p-2 flex-shrink-1">flex文字01（flex-shrink-1）</div>
    <div class="p-2 w-100">flex文字02</div>
    <div class="p-2 w-100">flex文字03</div>
  </div>