htmlcsswebfrontendprismjs

Can not get horizontal scroll bar on <code>

No matter what I do, I can NOT get the code block to create its own scroll bar on smaller breakpoints. It continuosly creates a full page scroll bar.

here is the live preview with the error.

I tried every form of overflow property. I tried wrapping it in a another div with overflow: scroll;.

Solution

  • code elements are inline so width/height doesn't work as expected exactly unless you make it a block/inline-block. See: https://stackoverflow.com/a/9670566/1265817

    Another approach would be to set the pre wrapper to a set max-width of the screen width.

    pre {
   max-width: 95vw;
}