Why does a long code block make a CSS Grid dashboard wider than the viewport?

Allow both the track and its content item to shrink, then put horizontal scrolling on the code block.

.dashboard {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
}
.main { min-width: 0; }
.main pre { max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  .dashboard { grid-template-columns: minmax(0, 1fr); }
}

Grid items can have content-based automatic minimum widths. minmax(0, 1fr) and min-width: 0 let the content area shrink. The code remains readable through its own scrollbar. Check nested flex/grid children if overflow persists.

Reference: MDN min-width.

AI-assisted DevCircle editorial explanation. Corrections and alternative solutions are welcome.