Context & Flow

@ Smashing Conf Freiburg

Design Unknown Content
On An Unknown Canvas

CSS has Real Layout Tools

Not just Grid or Flexbox, but an entire system…

Useful for… Defining Content Size

Like a page wrapper with a max width, plus padding

Reset Global Box-Sizing

*, *::before, *::after { box-sizing: border-box; }

Box Properties 👎 Shouldn’t Inherit

html { box-sizing: border-box; }
* { box-sizing: inherit; }

Intrinsic Sizing

  • Content sizes
  • width or height of min-content, max-content, etc

Extrinsic Sizing

  • Context sizes (available space)
  • width or height set in px, %, em, etc

Trust The Flow

Use absolute/fixed position with caution

The reason Container Queries Are Difficult

💥 Size » Query » Change » Resize 💥

Intrinsic Size Keywords

max-content | min-content | fit-content

Intrinsic Sizing

  • auto
  • min-content
  • max-content
  • fit-content

Grid only function fit-content(<max>)

min(max-content, max(min-content, <max>))

fit-content Keyword


Extrinsic Sizing

  • Context sizes (available space)
  • width or height set in px, %, em, etc

Use Image Width/Height

to avoid jumpy layout while loading

Extrinsic Aspect-Ratio

aspect-ratio: <ratio>;

Mixed Aspect-Ratio

aspect-ratio: <ratio> auto;

Replaced Elements… object-fit & object-position

object-position ~= background-position

Same values, but for placing an object

object-fit: fill

contain | cover | scale-down

Turn off Box Generation

content | none

Display: Contents

Remove those pesky extra divs…

New… Display: Flow-Root

“A mini layout in your layout”…

Flow-Root Block Formatting Context

Clear floats, prevent margin-collapse…

Also… Multiple-Value Display

outside and inside

Display-Outside Inline Flow-Root…

Behavior in parent layout

Display-Inside Inline Flow-Root

Context for child layout

Get Explicit Block Flow, Block Flex…

The default outer value, when only inner is set

Get Explicit Block Flow

The default inner value, when only outer is set

  • block » block flow
  • flow-root » block flow-root
  • inline » inline flow
  • inline-block » inline flow-root
  • flex » block flex
  • inline-flex » inline flex
  • grid » block grid
  • inline-grid » inline grid


clip | ellipsis

Not a Content Strategy

Makes dangerous ass… (umptions)

Box Overflow

overflow-x/-y | overflow-inline/-block

Default Visible

Acts like auto when single-axis

Overflow Hidden

  • no scroll bar
  • clipped at padding-box edge
  • programmatic scrolling is allowed

Overflow Clip

  • no scroll bar
  • clipped at padding-box + overflow-clip-margin edge
  • programmatic scrolling not allowed

Overflow Scroll / Auto

(usually auto…)

Writing Modes

horizontal-tb | vertical-rl/lr | sideways-rl/lr


mixed | upright | sideways

Understand Logical Dimensions

Writing-Mode Relative

Inline ↔ Axis Text Flow & Box Stretching

Block ↕ Axis Text Wrap & Box Stacking

Relative to… Physical Space


Relative to… Writing Mode

*-inline/*-block & *-start/*-end