Mastering CSS Flow: How Layout, Width, and Height Interact

1. Introduction

When learning CSS, many beginners get confused by countless properties and spend hours chasing visual designs; reading Zhang Xinxu's "CSS World" reveals that CSS follows physical and magical rules that can solve many problems.

“Digging the reasons behind simple phenomena will teach you many CSS skills that are hard to learn.”

2. Flow

CSS has an invisible basic positioning and layout mechanism called “flow”. The article clarifies the difference between normal flow, document flow, and text flow, using water flow as an analogy.

Block‑level elements act like water filling a container, while inline elements are like floating wood.

2.1 Fluid Layout

Leveraging the flow mechanism enables fluid layout, allowing concise and flexible CSS.

2.2 Block‑level and Inline Elements

Common block‑level elements include <div>, <li>, <table>, <p>, <h1>–<h6>. They occupy a full line and have default display values such as block, list-item, and table. Inline elements like <a>, <span>, <i> appear on the same line and cannot change height, line‑height, or margins.

Each element has an outer box and an inner box; block elements have an outer “block box” and an inner “container box”. Inline elements have only an “inline box”.

3. Flow and Width/Height

Width and height affect the inner (content) box. Various width behaviours are described:

3.1 width:auto

Four behaviours: fill‑available (e.g., <div> takes 100% of parent width), fit‑content (shrinks to content size), min‑content (minimum width needed), and overflow when content exceeds the container.

3.2 width:100% loses fluidity

Setting width:100% adds margin and padding to the total width, causing overflow. Removing margin/padding or using box-sizing:border-box resolves the issue.

3.3 How width works

Width applies to the content box; padding and border increase the total size (e.g., width:100px; padding:20px; border:20px results in a total width of 180px).

.div-1 {
  float: left;
  padding: 10px;
  border: 2px solid black;
}
.div-2 {
  width: 200px;
  height: 200px;
  border: 2px solid red;
  background-color: aqua;
}

3.4 Width Separation Principle

Avoid combining width with padding or border on the same element, as it changes the layout. Use a wrapper element to keep the width separate.

.first-div-father {
  width: 102px;
}
.first-div {
  border: 1px solid;
}

3.5 box‑sizing

The box-sizing property changes which box the width/height applies to. Supported values are content-box (default), padding-box (Firefox), and border-box. margin-box is unsupported because margin does not affect element size.

4. Height

4.1 height:auto

Height is simpler because vertical space is unlimited; height:auto sums the heights of child boxes.

4.2 height:100%

Percentage height works only when the parent has an explicit height or when using absolute positioning.

4.3 Why height:100% fails without parent height

Browsers render the parent first; if the parent’s height is auto, the child’s percentage height cannot be resolved, resulting in auto (NaN). To make height:100% work, set an explicit height on the parent or use absolute positioning.

5. Conclusion

The note summarizes how flow interacts with width and height, explores box‑model nuances, and offers practical insights for developers to build more flexible and robust layouts.