Implement a fixed-width sidebar with Flexbox and CSS Grid

WHAT THIS TESTS: The interviewer wants to see if you treat layout methods as tools with tradeoffs, not just syntax. They are checking whether you understand that Flexbox is fundamentally one-dimensional while Grid is two-dimensional, and whether you can articulate when a one-row layout is better served by the simpler model. They also want to hear specifics about sizing, overflow, and gap handling.

A GOOD ANSWER COVERS: First, the Flexbox implementation: set the container to display flex, give the sidebar flex: none or flex: 0 0 250px so it keeps its fixed width, and give the main content area flex: 1 1 auto so it absorbs leftover space. Second, the Grid implementation: set the container to display grid and define grid-template-columns: 250px 1fr so the first track is fixed and the second fills the remainder. Third, pros and cons for this specific case. Flexbox is less code, handles wrapping and variable content flow naturally, and is conceptually simpler for a single axis layout. Grid gives explicit column tracks, cleaner gap support without margin hacks, and makes future layout changes like adding a header row easier, but it introduces a second dimension you are not actually using. Fourth, mention real behavior differences. In Flexbox, the main area can shrink below its content size unless you set min-width: 0, which surprises people. Grid tracks respect their sizing more rigidly, so overflow behavior is more predictable.

COMMON WRONG ANSWERS: Saying Grid is always the modern best practice and Flexbox is outdated. Using width percentages instead of flex or fr units. Forgetting that Flexbox items have a default min-width: auto that can prevent shrinking. Claiming Grid requires more markup; it does not. Ignoring gap handling, which in Grid is native and in Flexbox historically required margins.

LIKELY FOLLOW-UPS: How would you handle a responsive breakpoint where the sidebar collapses or stacks? What happens if the main content has a very wide table or image? How do you add consistent spacing between the two areas without margin hacks? Have you used subgrid or container queries to solve similar problems?

ONE CONCRETE EXAMPLE: Imagine a dashboard at 1440px viewport width. With Flexbox, the sidebar stays at 250px and the main area is 1190px. If the user opens a wide data table inside main, Flexbox may refuse to shrink the main area below the table width and push the sidebar off screen unless you explicitly set min-width: 0 on the main area. With Grid, the 1fr track will stay at 1190px and overflow the table inside it rather than breaking the outer layout, because the grid track itself is rigidly sized.

Source: developer.mozilla.org