"pre" tag not shrinking. Not showing Horizontal scroll Bar

Question

I show a lot of code on my site. The rest of my site is responsive, but the "pre" tag refuses to shrink and display horizontal scroll bars. Here's a screenshot of my content getting cut off due to the long "pre" tag at the top:

I'm using overflow:horizontal, but you can see in the example that it doesn't work. Here's the actual link enter link description here

As soon as I switch my theme, it works fine! I'm using a child theme of the Genesis Framework...

Answer 1

You need to assign a width to the element, so that the content can overflow. Try setting width: 100vw, for example, and it will work.

If your pre tag has margin/padding to the sides for your actual website layout, try width: calc(100vw - 40px) whereas in this example 40px relates to a margin of 20px to both sides. Replace it with your own actual margin/padding.

Answer 2

I don't know why nobody gave the answer of:

pre {
   white-space: pre-wrap;
}

It preserves the lines and words while at the same time wrapping the lines if there isn't enough space.