The following seems to take care of the issue in Firefox at least, I haven't had a chance to check in other browsers.

    pre {
        max-width:500px;
        overflow-x:scroll;
        padding:2px;
    }

   pre{ display: block; width: 95%; overflow: scroll; }

works for me

display: block; isn't needed, pre is a block level element :)

what can i say, it wasn't working quite right for me without it.

Right now, your css reads as follows:

    pre {
      overflow:hidden;
      padding:2px;
    }

Changing it to the following works for me in both Firefox and Safari:

    pre {
      overflow:auto;
      padding:2px;
      max-width:500px
    }

Given you've already fixed it with max-width I can't test this, but CSS 3 can also help out. The benefit of this approach is that the container can remain liquid:

    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */

You can read about this approach here: http://users.tkk.fi/tkarvine/pre-wrap-css3-mozilla-opera-ie....