Why is my code getting wrapped in pre tags?!

Following the migration of my blog site into my main site, I was performing some manual testing of my site and it’s styling and I noticed that on mobile devices code in <pre> tags was being wrapped.

As a result, code blocks were looking like this:

I spent far too long on this. I thought it would be as easy as:

pre, code {
    overflow-x: scroll;
}

But still lines were wrapped.

To debug further, I decided to isolate the HTML and CSS and see if I could find if there was a style somewhere that was stopping the above from taking effect. I threw a playground together on JSFiddle and it was then that I confirmed my own assumption that the default behaviour is for <code>/<pre> tags to not wrap. But as soon as I added Bootstrap to the playground, code was wrapped!

I’m a big fan of Bootstrap and all, but this is silly! I wonder what the justification for this is. After all, <pre> means preformatted text and text that’s already been formatted will be wrapped if it’s meant to be wrapped! Sadly, this is the trade off with using frameworks like Bootstrap, but in my opinion it’s worth it when I think of the time saved when using Bootstrap in the first place and not reinventing the wheel just so that “I have full control over the code and I know exactly what it’s doing”.

So, the CSS that I used to fix this is:

// Make sure that <code> blocks in <pre> tags don't get wrapped.
// This is required as Bootstrap makes code blocks in pre wrap, for some reason...
pre > code {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

I hope this saves someone from the nightmare I went through to achieve such a small task!