Can not get horizontal scroll bar on <code>

Can not get horizontal scroll bar on <code>

Problem Description:

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 – 1

code elements are inline so width/height doesn’t work as expected exactly unless you make it a block/inline-block.

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

pre {
   max-width: 95vw;
Rate this post
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.