Explain CSS layout mechanics

CSS foundation questions should connect layout rules to measurable UI failures like overflow and layout shift.

type LayoutBox = {
  contentWidth: number;
  paddingInline: number;
  borderInline: number;
  boxSizing: 'content-box' | 'border-box';
};

function renderedWidth(box: LayoutBox) {
  if (box.boxSizing === 'border-box') return box.contentWidth;
  return box.contentWidth + box.paddingInline * 2 + box.borderInline * 2;
}

function willOverflow(containerWidth: number, child: LayoutBox) {
  return renderedWidth(child) > containerWidth;
}

Convert the answer into observable behavior. In a mid-senior interview, say which behaviors are covered by unit tests, interaction tests, accessibility checks, and one browser smoke path.

test('content-box width can overflow after padding and border are added', () => {
  expect(
    willOverflow(320, {
      contentWidth: 320,
      paddingInline: 16,
      borderInline: 1,
      boxSizing: 'content-box',
    })
  ).toBe(true);
});

Shows whether you understand css layout mechanics as an operating model, not as memorized trivia.

• Use one concrete browser or React-facing example.
• Name the failure mode a production user would notice.
• Keep the first answer under two minutes before expanding.

• Start with the rule: flex, grid, containment, stacking, and overflow behavior.
• Tie the rule to ownership: what runs in render, what runs after paint, what is external state, and what must be cleaned up.
• Close with the smallest test, trace, or code review check that would catch the bug.

• A short interview answer is easier to follow, but a senior answer must still name the edge case.
• Framework vocabulary helps only after the browser or language rule is clear.

• Slow devices where timing bugs become visible.
• Repeated user actions before async work settles.
• Browser defaults that differ from custom component behavior.

• Unit-test the pure decision when possible.
• Use an interaction test for focus, keyboard, timing, or cleanup behavior.

• How would this change in a React component?
• What would you log or profile if this broke in production?