Fixed-height containers are the usual failure
Aliases: line-clamp · max-height clipping · card overflow
What it is
When enlarge clips type or invents a nested scrollbar, the cause is usually not “the type is too big.” It is that the box wrote height as a constant. Cards, tabs, chat bubbles, and sticky bars pick height / max-height for three lines at 100%. Once type grows, line-height × lines exceeds the box, and the surplus is cropped or scrolled inside the box. Fixed height is the ordinary structural reason this class fails.
Why it happens
Type size is a variable. If height is a constant, the product breaks after enlarge. height: 120px, absolute pins on top and bottom, flex children with overflow: hidden that must not grow — these fail first at the checkpoint. line-clamp: 3 freezes line count and is equivalent to a height lock in rows: a summary at 100%, a sheared key sentence at 200%.
An inner scrollbar looks like “the content is still there.” For someone already zoomed, it is nested scrolling: the page is moving vertically and the box is too. Focus and the reading start are easy to lose. That is a different symptom from the page being stretched into horizontal scroll; the root is still a box that will not grow. min-height is a floor; the box may still grow. The failure is treating mock height as a dead line.
Studying it
Search styles for height, max-height, line-clamp, and absolutely pinned blocks. At 200%, screenshot each: clipped, inner-scrolling, or grown. Compare lost nodes before and after changing height to min-height.
Independent variables: height constraint (fixed / max / line clamp / none), content length. Dependent variables: whether clipping occurs, whether inner scroll appears, whether the full string stays visible.
Virtualized lists recycle rows by row height; enlarge that changes row height can punch holes or overlap. Log that separately from ordinary clipping.
Where it stops holding
Video players, maps, and canvases have an aspect ratio; height may lock there, but type should live in a growable outer layer, not in canvas pixels. Single-line fields and toolbars may have a height cap, yet values and labels must not be eaten. Chat panes often scroll internally by design, provided the current message remains fully readable inside that pane. Reflow at higher magnification may dismantle the card grid itself; that is a separate layout strategy and does not excuse a fixed height at this checkpoint.
Applying it
- Keep card rhythm with
min-height, notheight. The box must be able to grow when copy grows. - Do not line-clamp legal copy, full error text, price, or stock — strings that cannot be dropped.
- Size sticky bars from their content, or give the main column padding that tracks type size, so prose is not sheared by chrome.
- Verify: at 200% text, every card, tab panel, and notice still shows complete sentences without a second vertical scroll inside the box. Change a suspect
heighttomin-heightand compare screenshots; if clipping vanishes, the cause is confirmed.