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