Can not get horizontal scroll bar on <code>

Question

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;.

Answer 1

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;
}