Width and height properties set preferred dimensions, while min and max constraints bound the used size. When content grows beyond a fixed block size, overflow behavior decides whether it clips or scrolls.
Make this comfortable
CSS min and max sizes: let content grow without breaking the layout
When to use it
A case note should remain readable whether it has one sentence or a long translated explanation. Give it a minimum block size for visual balance, but let its natural block size expand. Limit its inline measure so long lines do not stretch across the whole dashboard. The sample keeps the note within its parent and allows a long token to wrap. A height of 8 rem would look neat in a screenshot but can cut off text after zoom or validation. If a bounded scrolling area is truly required, label it and verify keyboard access. Prefer content-driven growth for the main document. Check a short note, a long note, and a missing optional note before locking any maximum.
.case-note { min-block-size: 7rem; max-inline-size: 68ch; inline-size: 100%; box-sizing: border-box; padding: 1rem; overflow-wrap: anywhere; }
.case-note p { margin-block: 0 .75rem; }Cost and verification
A min-size constraint does not add meaningful processing work. Its cost is the space it reserves in every repeated item, which can make a dense list far longer than necessary. Use it only where consistency helps scanning. A max-inline-size based on ch approximates a text measure rather than guaranteeing a fixed character count; different fonts change the result. Check the page with the actual production font and fallback font. Do not use max-block-size with overflow hidden on required copy, because hidden material cannot be recovered from that view.
Common Mistakes
- Do not set a fixed height on user-authored text.
- Do not mistake max-inline-size for a character limit.
- Do not clip evidence to keep cards equal.
Connected lessons
css
reference
web