max-width.md

title	Max-width
description	Utilities to control an element's maximum width.
keywords	maximum width mxw max inline size max inline-size

Layout stops

Use d-wmx-{stop} to set a fixed maximum width for an element using layout token stops. The hyphen before the number indicates a layout token reference, e.g. d-wmx-100 outputs max-inline-size: var(--dt-layout-100) (64px). This can be combined with d-w{n}p and d-wmn-{stop} to have an element fill a certain width range.

[!INFO] Scale-indexed vs pixel-indexed stops Bare integer stops (25, 50, 100, …) are scale-indexed on the 64px base — value_in_px = stop × 64 / 100, so 25 = 16px and 100 = 64px. Stops with a px suffix (1px, 2px, 8px, 20px, 24px) are off-scale exceptions that encode the literal pixel value.

<dt-stack direction="row" justify="center" gap="200" class="d-w100p">
  <dt-stack direction="row" align="center" justify="center" class="d-py-200 d-px-100 d-w100p d-h-100 d-wmx-100 d-bgc-moderate d-bar4 d-ta-center">1</dt-stack>
  <dt-stack direction="row" align="center" justify="center" class="d-py-200 d-px-100 d-w100p d-h-100 d-wmx-150 d-bgc-moderate d-bar4 d-ta-center">2</dt-stack>
  <dt-stack direction="row" align="center" justify="center" class="d-py-200 d-px-100 d-w100p d-h-100 d-wmx-500 d-bgc-moderate d-bar4 d-ta-center">3</dt-stack>
</dt-stack>
<!-- @code -->
<div class="d-wmx-100">1</div>
<div class="d-wmx-150">2</div>
<div class="d-wmx-500">3</div>

Percentages

Use d-wmx{n}p to set a maximum width percentage for an element. No hyphen before the number, p suffix indicates a literal percentage value. Note: d-wmx33p = 33.333% and d-wmx66p = 66.667%.

<dt-stack direction="row" align="center" justify="center" class="d-py-200 d-px-100 d-w100p d-h-100 d-wmx50p d-bgc-moderate d-bar4 d-ta-center">1</dt-stack>
<dt-stack direction="row" align="center" justify="center" class="d-py-200 d-px-100 d-w100p d-h-100 d-wmx75p d-bgc-moderate d-bar4 d-ta-center">2</dt-stack>
<dt-stack direction="row" align="center" justify="center" class="d-py-200 d-px-100 d-w100p d-h-100 d-wmx100p d-bgc-moderate d-bar4 d-ta-center">3</dt-stack>
<!-- @code -->
<div class="d-wmx-50p">1</div>
<div class="d-wmx-75p">2</div>
<div class="d-wmx-100p">3</div>

Character width

Use d-wmx{n}ch to set a maximum width based on character count. Useful for limiting text line lengths for optimal readability.

<div class="d-wmx60ch">...</div>   <!-- max-inline-size: 60ch -->
<div class="d-wmx75ch">...</div>   <!-- max-inline-size: 75ch -->
<div class="d-wmx90ch">...</div>   <!-- max-inline-size: 90ch -->

Keywords

Use keyword utilities to set maximum width using CSS keyword values.

<div class="d-wmx-auto">...</div>
<div class="d-wmx-unset">...</div>
<div class="d-wmx-fit-content">...</div>
<div class="d-wmx-max-content">...</div>
<div class="d-wmx-min-content">...</div>

<script setup> import { percentage, layout, characterWidth, keywords } from '@data/width-height.json'; import ClampedTableWrapper from '@baseComponents/ClampedTableWrapper.vue'; </script>

Classes

Class	Output
.d-wmx-{{ i.stop }}	max-inline-size: var(--dt-layout-{{ i.stop }}) !important; /* {{ i.px }}px / {{ (i.px / 10).toFixed(1) }}rem */
.d-wmx{{ i }}p	max-inline-size: {{ i === 33 ? '33.333' : i === 66 ? '66.667' : i }}% !important;
.d-wmx{{ i }}	max-inline-size: {{ i }} !important;
.d-wmx-{{ i }}	max-inline-size: {{ i }} !important;