WebCraft

resize + max-width

resize keeps writing after max-width stops it

CAPTION DRIFTS

drag me wide

CAPTION HOLDS

drag me wide

CaveatDragging writes an inline width and does not stop at max-width. The box paints clamped, but a fit-content parent measures the stored value instead, so anything centred in that parent drifts off the box it belongs to.

FallbackGive the element and its caption a column with a width of its own. Then the centre is a property of the layout rather than of whatever the reader last dragged.

CSS
/* drifts: fit-content asks the element, */
/* and resize answers with the stored width */
.wrap { width: fit-content; }

/* holds: the column decides, not the drag */
.wrap { width: min(100%, 210px); }

Published