CSS grid column overflows its container

A grid track sized with 1fr can still be held open by its content. A long URL, wide image or code block can make the page scroll sideways.

Allow the track to get smaller

.layout {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1rem;
}
.main { min-width: 0; }
.main p { overflow-wrap: anywhere; }
.main img { max-width: 100%; height: auto; }
.main pre { overflow-x: auto; }

Replace the flexible track's automatic minimum with zero. Put min-width: 0 on its grid item too if the item has an automatic minimum that holds it open. These changes let the box shrink. They do not wrap text or resize its children, which is why those rules are separate.

Check the fixed parts

The sidebar still needs twelve rem plus the gap. If that cannot fit, stack the columns:

@media (max-width: 40rem) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}

Choose the breakpoint for your content. If the layout still overflows, inspect fixed widths, minimum widths, padding and white-space: nowrap on descendants. Two columns each set to 50% plus a gap also exceed the container. Use repeat(2, minmax(0, 1fr)) instead when you want equal columns with a gap.

Test a long URL, a wide image and browser zoom. Do not hide overflow on the whole page just to remove the scrollbar. That can cut off content and keyboard focus.

Want this fixed on your page? One agreed HTML or CSS fix costs $29. You keep the code.