Max-height
Utilities to control an element's maximum height.
Example #
Use d-hmx{n}p or d-hmx{n} to set a maximum height percentage for an element. This can be combined with d-h{n}p and d-hmn{n} to have an element fill a certain height range.
<div class="d-h216">
<div class="d-h72 d-hmx50p">1</div>
</div>
Classes #
Class | Output |
|---|---|
| .d-hmx10p | max-height: 10% !important; |
| .d-hmx20p | max-height: 20% !important; |
| .d-hmx25p | max-height: 25% !important; |
| .d-hmx30p | max-height: 30% !important; |
| .d-hmx40p | max-height: 40% !important; |
| .d-hmx50p | max-height: 50% !important; |
| .d-hmx60p | max-height: 60% !important; |
| .d-hmx70p | max-height: 70% !important; |
| .d-hmx75p | max-height: 75% !important; |
| .d-hmx80p | max-height: 80% !important; |
| .d-hmx90p | max-height: 90% !important; |
| .d-hmx100p | max-height: 100% !important; |
| .d-hmx0 | max-height: 0px !important; |
| .d-hmx1 | max-height: 1px !important; |
| .d-hmx2 | max-height: 2px !important; |
| .d-hmx4 | max-height: 4px !important; |
| .d-hmx6 | max-height: 6px !important; |
| .d-hmx8 | max-height: 8px !important; |
| .d-hmx12 | max-height: 12px !important; |
| .d-hmx16 | max-height: 16px !important; |
| .d-hmx20 | max-height: 20px !important; |
| .d-hmx24 | max-height: 24px !important; |
| .d-hmx32 | max-height: 32px !important; |
| .d-hmx42 | max-height: 42px !important; |
| .d-hmx48 | max-height: 48px !important; |
| .d-hmx64 | max-height: 64px !important; |
| .d-hmx72 | max-height: 72px !important; |
| .d-hmx84 | max-height: 84px !important; |
| .d-hmx96 | max-height: 96px !important; |
| .d-hmx102 | max-height: 102px !important; |
| .d-hmx114 | max-height: 114px !important; |
| .d-hmx128 | max-height: 128px !important; |
| .d-hmx164 | max-height: 164px !important; |
| .d-hmx216 | max-height: 216px !important; |
| .d-hmx264 | max-height: 264px !important; |
| .d-hmx332 | max-height: 332px !important; |
| .d-hmx384 | max-height: 384px !important; |
| .d-hmx464 | max-height: 464px !important; |
| .d-hmx512 | max-height: 512px !important; |
| .d-hmx628 | max-height: 628px !important; |
| .d-hmx764 | max-height: 764px !important; |
| .d-hmx828 | max-height: 828px !important; |
| .d-hmx912 | max-height: 912px !important; |
| .d-hmx1024 | max-height: 1024px !important; |
| .d-hmx1140 | max-height: 1140px !important; |
| .d-hmx1268 | max-height: 1268px !important; |
| .d-hmx1340 | max-height: 1340px !important; |
| .d-hmx-auto | max-height: auto !important; |
| .d-hmx-unset | max-height: unset !important; |
| .d-hmx-fit-content | max-height: fit-content !important; |
| .d-hmx-max-content | max-height: max-content !important; |
| .d-hmx-min-content | max-height: min-content !important; |