Default sizing before anything is set

Before any width or height is set, a block-level element behaves in a specific default way: its width stretches to fill all of the available width inside its parent, while its height shrinks to fit whatever content is inside it - just tall enough, no more. This is sometimes called the element's intrinsic size. Setting width or height explicitly overrides this default behaviour, fixing that dimension to the value given regardless of how much content is inside, or how much space the parent has available.

Width and height still only set the content box

As with the box model from WDD7 and WDD8, width and height set the size of the content layer only. Padding and border are still added outward from that, so a box declared as width: 300px; with padding: 20px; and a 5px border on every side has a visible width of 300 + 40 (padding both sides) + 10 (border both sides) = 350px, exactly as WDD7 and WDD8 already established for the box model in general.

Percentage width: calculated from the parent's width

A percentage width is calculated as a percentage of the parent element's own width. If a parent is 800px wide and a child has width: 50%;, the child renders at 400px wide - straightforward, because the parent always has a defined width one way or another (its own explicit width, or the viewport width if nothing else is set).

Percentage height: needs the parent to have an explicit height

Percentage height works the same way in principle - a percentage of the parent's height - but has a much more common failure case. A parent's height is very often left at its default, auto, meaning it shrinks to fit its own content rather than having any fixed height of its own. If the parent's height is auto, there is no fixed reference height for a percentage child height to be calculated from, so a percentage height on the child typically has no effect - it behaves as if no height had been set on the child at all, rather than producing any specific number. This only starts working correctly once the parent is given an explicit height of its own, such as a fixed pixel value.

The default is visible, not hidden or resized

Fixing a box's height (or width) creates a new question: what happens if the content inside genuinely needs more space than the box provides? By default, the browser does not shrink the content to fit, and does not automatically grow the box to accommodate it. Instead, the content simply overflows - it spills outside the edges of the box, visibly, often overlapping whatever comes after it on the page. This default behaviour is controlled by the overflow property, whose default value is visible. WDD7 already introduced overflow: hidden; as a fix for a different problem (a collapsing floated container); here the same property is relevant again because fixed-height text containers are a common real-world source of overflowing content, especially once content length is variable - user-submitted text, or a translated version of a page with longer words than the original.

Practical: percentage height and overflow, WebStorm

Build this from scratch - no starter file this time.

1. In WebStorm, create a new HTML file called sizing.html.
2. Add a <div class="parent"> containing a <div class="child"> with some short text inside.
3. In an internal stylesheet, give .child height: 50%; and a background colour, but leave .parent with no height set. Open in a browser - the child's height should look like it has had no effect.
4. Now give .parent an explicit height: 400px;. Save and refresh - the child should now visibly become exactly half that height.
5. Finally, give .child a fixed height: 30px; and paste in several sentences of text. Observe the text overflowing the box by default, then add overflow: hidden; to .child and observe the difference.

<div class="parent">
  <div class="child">Some sample text</div>
</div>

.parent {
  height: 400px;
  border: 2px dashed #999;
}

.child {
  height: 50%;
  background: #E6F1FB;
}