The Overflowing Grid

Description

A developer is building a puzzle platform. One puzzle page shows a two-column layout: a wide main content area on the left and a sticky sidebar on the right.

A user reports horizontal scrolling on one puzzle because the input data <pre> block has very long lines. The developer adds this fix:

body {
  overflow-x: hidden;
}

.puzzle-main {
  overflow-x: hidden;
}

The horizontal scroll is gone — but now the entire page layout is broken. Everything stacks vertically like a list. The sidebar has collapsed. The two-column grid is gone.

Your task: The developer should remove both overflow-x: hidden declarations. What single CSS property and value (in property: value format) should be added to .puzzle-main instead — to prevent the grid item from overflowing its column without hiding any overflow?

The relevant CSS context:

.puzzle-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
}

.puzzle-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* your fix goes here */
}

pre {
  max-width: 100%;
  overflow-x: auto;
}

Hint: CSS Grid items have a default minimum size that can cause them to overflow their track.

The page uses CSS Grid: grid-template-columns: 1fr 320px The .puzzle-main item contains a <pre> block with lines up to 3,000 characters long. The .puzzle-sidebar has position: sticky. Broken fix applied: body { overflow-x: hidden; } .puzzle-main { overflow-x: hidden; } Result: two-column layout collapsed to single column. Sidebar lost sticky behavior. Your answer should be a CSS property: value pair (e.g., "display: block"). The correct answer fixes the grid item overflow without hiding any overflow.

Description

Input Data

Solve This Challenge