Guidelines

This site is for tech Q&A. Please keep your posts focused on the subject at hand.

Ask one question at a time. Don't conflate multiple problems into a single question.

Make sure to include all relevant information in your posts. Try to avoid linking to external sites.

Links to documentation are fine, but in addition you should also quote the relevant parts in your posts.

0 votes
25 views
25 views

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.

mobile view screenshot showing incorrectly overflowing text

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.

in General
edited by
by (100)
2 9
edit history

Your answer

Preview

Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
By submitting this post you agree to our Terms & Conditions.
To avoid this verification in future, please log in or register.

1 Answer

0 votes
 

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);
  }
}
by (100)
2 9
edit history
...