Code snippets with long lines trigger page overflow for small viewport widths

[caleb531]

It's much easier to see it than to describe it in one line...

Here's the current documentation site in a desktop browser window. Looks just fine.

Here's the current documentation site with the viewport sized to that of an iPhone 5:

Notice the page overflow on the X axis. From my testing, this is caused by the code blocks on the page with lines exceeding the page width. I know this because if I hide all the code blocks with display: none, the page width does not overflow.

I've tried max-width: 100% and box-sizing: border-box on the code block containers (each is a div.highighter-rouge containing a pre element containing a code element). So far, I have had no success.

Ideally, I want the content of the pre to overflow on the X axis within its container as needed, however this should not extend the width of the container beyond its allowed space on the page. So far, the only way I've been able to achieve this has been by setting the max-width on the container to a fixed width (though I'd really prefer a width that responds to the width of main):

[caleb531]

I found the solution—simply setting max-width: 100% on <main> worked perfectly.