Wide content in <pre> elements breaks mobile view

Question

I have a CSS definition for displaying code snippets:

pre {
  overflow: auto;
  max-height: 35em;
  scrollbar-width: auto;
}
pre code {
  display: block;
  margin: 0;
  padding: 0;
}

In theory, at least from my understanding, that should fit the <pre> element into the parent element and overflow its content when that is larger than the parent would allow. And it works correctly when the page is being displayed in a desktop browser.

However, in mobile view the element, even though there is some overflow, the content displayed far too wide, as you can see from below screenshot. The nested elements should end at about the red line and overflow the rest of the text instead of continuing past the viewport border.

I tried explicitly inheriting the parent element width in mobile view:

@media screen and (max-width: 980px) {
  pre {
    width: inherit;
  }
}

but that didn't fix the issue.

Answer 1

In addition to inheriting the parent element width you need to set the maximum width in viewport units.

@media screen and (max-width: 980px) {
  pre {
    width: inherit;
    max-width: 100vw;
  }
}

Adjust the maximum width if the parent element does not take up the full screen width (e.g. because of padding/margins or other elements).

@media screen and (max-width: 980px) {
  pre {
    width: inherit;
    max-width: calc(100vw - 40px);
  }
}