CSS Child / Surviving Contact

Text wraps, and everything you build sits on top of that.

The single most under appreciated fact in page design is that text decides its own height.

Text is not a block of a known size. It is a stream that flows into whatever width it is given and takes whatever height that requires. Narrow the space and it grows taller. Widen it and it grows shorter. Change the typeface, the size, the spacing, or the language, and the height changes again. This is not an inconvenience to be worked around, it is the basic behaviour of the medium, and every fixed height you impose on something containing text is a small bet that the text will never be longer than you imagined. You will lose some of those bets.

So the general rule is to constrain width and let height look after itself. Widths are yours to decide, because they follow from the space available and from readability, and there is a genuine limit past which a line of text becomes tiring to read because the eye struggles to find the start of the next line. Heights are the content's business. When you find yourself wanting to fix a height, pause and ask what would happen if the content were twice as long. If the answer is that it would spill out or be cut off, you have found a fault before it found you.

There are moments when a fixed height is genuinely right, usually where a shape must be preserved: a picture that must hold its proportions, a control that must be a consistent size for the sake of the hand using it. Those are legitimate, and they are recognisable because the size is the point rather than an accident of the content. The distinction to hold onto is between a dimension you have chosen for a reason and a dimension you have chosen because it happened to fit the words in front of you at the time.