flex-shrink-1
bootstrap5.css
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>