The extra line is part of the design

The card has to be allowed to get taller

The enquiry link is still in the HTML, but that does not help the visitor if the service card has hidden it. A 360-pixel card can fit neatly at the design width, then run out of room when a narrow screen or increased word spacing pushes the heading onto another line. The rectangle may remain exactly as its designer intended. The visitor, meanwhile, has lost part of the explanation or the way to respond to it.

The visual appeal of equal rectangles is understandable. A consistent grid helps a page feel considered, and a short description looks good inside a controlled composition. The difficulty is treating one arrangement of text as though it were an image. Text is affected by available width, font metrics, content length and reader preferences. A heading that happens to occupy two lines is not a two-line object. Its number of lines is the result of conditions the website does not completely control.

The accompanying HTML places identical service text in fixed-height and naturally growing cards, with default spacing and explicit reader overrides. It is a proposed specimen, not a browser-verified result. Its geometry report lets someone inspecting it compare the visible card with the space its content occupies. The useful question is whether the visitor can read the whole explanation and reach the enquiry link under the changed conditions. Neither a regular grid nor a favourable coordinate can answer that alone.

Start with text somebody might actually read

The heading reads “Help your operations team connect the systems they already depend on”. The explanation concerns connecting requests, records and people; the link says “Discuss an integration that crosses several teams”. These are ordinary service-page phrases, and they take up space. Replacing them with Heading and Learn more would make the test easier by removing the work the component is meant to do. Keep the longer useful text, especially the action, so a tidy specimen cannot pass simply because it has little to say.

The fixed card is 360 pixels high and hides overflow. Its growing counterpart has no fixed height and permits long content to wrap; the grid chooses columns from available width. A parent can still defeat that arrangement. Put either card inside another clipped container and content may disappear at that outer boundary. Follow the constraints from the words through their ancestors, because giving the leaf component room to grow helps only if the rest of the page allows that extra space to remain visible.

Compare default/fixed, default/growing, spaced/fixed and spaced/growing at a narrow viewport. The geometry report gives card width and height, scroll height and the enquiry link’s lower edge relative to the card. In the clipped version, scroll height beyond the visible height points to content worth inspecting; in an intentionally scrollable region, the same measurement could be expected. Read the figures alongside the overflow rule, then follow the whole heading-to-link relationship. A link can sit inside the card while the explanation above it is clipped, leaving a visitor able to act without knowing whether the offer is relevant. Check the final sentence as well as the final element’s coordinates. The report helps locate that failure; reaching the link by keyboard and seeing where focus appears still require trying the displayed page. A number cannot perform that journey for us.

Increasing the fixed height may accommodate the specimen on one machine while retaining the assumption of a known maximum content size. A minimum height can provide a regular appearance while allowing growth. A rigid maximum needs a separate way to expose meaningful excess. Where equal-height neighbours are desired, a shared grid row can stretch them to the tallest content and retain the words, rather than clipping whichever card happens to need more space.

.fixed { height: 360px; overflow: hidden; }
.growing { min-width: 0; overflow-wrap: anywhere; }
/* The growing card has no fixed height. */

Reader settings are part of the layout

W3C's explanation of the text-spacing criterion specifies testing adaptation when line height becomes at least 1.5 times font size, paragraph spacing at least 2 times, letter spacing at least 0.12 times and word spacing at least 0.16 times.[1] These are override conditions, not a rule requiring every site to use those defaults. The specimen's spaced cards use those values so the discussion concerns an inspectable constraint rather than a vague instruction to make the font more readable.

A designer can reasonably choose tighter tracking or paragraph spacing for the default interface. Reader overrides then put another demand on the component: keep its content and function available when those settings change. Automatically reducing the font size to make it fit protects the rectangle by reversing the reader’s attempt to make the words usable. Removing the explanation at a breakpoint makes another bargain again. It may be a content decision, but it cannot demonstrate that the original text adapted successfully.

Narrow-width reflow is related but distinct. W3C describes the relevant width for ordinary vertically scrolling content as equivalent to 320 CSS pixels, with exceptions for content whose meaning requires two-dimensional layout.[2] A service description is not normally one of those exceptions. Stacking cards can address the horizontal arrangement while their internal height still clips text. Passing a page-width check does not prove that the final line of each card survives; both constraints deserve attention.

Intrinsic sizing introduces another possible obstacle. As MDN explains, flex and grid items can derive an automatic minimum width from their content.[3] Setting min-width to zero where appropriate can let a child shrink within its track; allowing suitable word breaks handles a different problem inside that child. The specimen includes both provisions in its growing card, but its ordinary phrases do not independently prove every long-token case. A real service page should also exercise an uninterrupted reference or URL if it displays one, rather than assume that a paragraph of well-spaced English covers that boundary.

Inspect the journey through the changed component

Reading the whole card is the first check. Reaching its link is another. Use the keyboard to move through the page in the actual displayed order and watch where focus appears. If focus moves to an action whose description is clipped, the component has not become understandable merely because the link remains technically operable. If a later repair rearranges the visible cards, check that the document order still tells the same story. Typography includes relationships between words and controls, not just the shape of individual letters.

Keep the browser, viewport, reader settings and observations beside the specimen when inspecting that journey. A clipped sentence at one width can reappear at another, while a link that looks safely inside the card may still receive hidden focus. Zoom, keyboard use and assistive technology each expose another part of the offer. Record the particular obstruction when one occurs: which words or control became unavailable, under which setting, and which enclosing constraint prevented the card from growing. That makes the next layout change answer a visible problem.

Content choices can still help. A short accurate heading, an explanation without repetition and a link whose wording makes sense nearby reduce unnecessary pressure. Editing is preferable to shrinking everything into a fixed box. But some subjects genuinely need a longer name, and translated or updated copy may legitimately take more space. If the component is allowed to grow, an editor can improve the writing for the reader rather than negotiate every extra line against a hidden layout limit.

There are good reasons to constrain a toolbar or deliberately abbreviated overview. The complete meaning still needs an intelligible route, and the main action must remain discoverable. This card has another job: explain a service well enough for someone to decide whether to enquire. Let it gain height when the heading wraps or a reader changes the spacing. Then inspect the full explanation and enquiry together under those conditions: the visitor should still be able to read the offer and reach the action it describes.