CSS layout

Model answer

Start with normal flow because block and inline layout already adapt to content. Use Flexbox for one-dimensional distribution and alignment, and Grid when rows and columns must coordinate. They compose rather than compete.

1/* One axis: a toolbar */2.toolbar { display: flex; gap: 12px; align-items: center; }3
4/* Two axes: a page shell */5.page {6  display: grid;7  grid-template-columns: 240px 1fr;8  grid-template-rows: auto 1fr;9}

Model answer

Flex and grid items commonly have an automatic minimum size based on their content. That can prevent a track from shrinking even when defined with 1fr. min-width: 0 allows the item to shrink and lets its own overflow strategy apply.

1.layout { display: grid; grid-template-columns: 240px 1fr; }2
3/* the 1fr track won't shrink below its content without this */4.layout > .main { min-width: 0; }5.layout > .main pre { overflow-x: auto; }

Model answer

The containing block depends on positioning and ancestor properties. Static and relative elements usually use a content box from their formatting context; absolute and fixed positioning follow specific ancestor rules, and transforms can establish containing blocks.

1.card { position: relative; }        /* becomes the containing block */2.card .badge { position: absolute; top: 0; right: 0; }3
4/* transform also makes an ancestor the containing block for fixed children */5.parent { transform: translateZ(0); }

Model answer

Intrinsic sizes come from content: min-content is roughly the smallest width without avoidable overflow, while max-content is the width the content prefers without wrapping. Functions such as minmax, fit-content, and clamp combine intrinsic constraints with available space.

1.tag { width: max-content; }              /* as wide as the text wants */2.sidebar { width: fit-content; max-width: 300px; }3.grid { grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr)); }

Model answer

Adjacent vertical margins of block boxes in the same block formatting context can combine rather than add. Flex and grid item margins do not collapse. Using gap for component spacing avoids relying on collapse behavior.

1p { margin: 16px 0; }2/* two stacked <p> are separated by 16px, not 32px — the margins collapse */3
4.stack { display: flex; flex-direction: column; gap: 16px; }5/* gap does not collapse — always exactly 16px */

Model answer

Identify the overflowing element, inspect its scroll width and computed constraints, then check unbreakable content, intrinsic minimums, fixed widths, transforms, and viewport units. Hiding overflow before finding the cause can mask inaccessible content.

1/* quick visual audit in devtools console */2[...document.querySelectorAll('*')].forEach((el) => {3  if (el.scrollWidth > document.documentElement.clientWidth) console.log(el);4});

Model answer

Several properties do, including flow-root, certain overflow values, floats, positioned elements, and flex or grid items. A BFC contains floats and changes margin interactions.

Model answer

It sticks relative to the nearest ancestor with a relevant scrolling mechanism and requires an inset. Overflow ancestors commonly explain apparently broken sticky behavior.

Model answer

It lets a nested grid use track sizing from its parent along an axis, aligning internal content across sibling components without duplicating track definitions.

Model answer

Viewport width units may include the scrollbar gutter while the document's content area does not. Width: 100% is often safer for ordinary full-width blocks.