After refreshing my rotting CSS braincells, I got a layout working properly and was quite happy. Then I tested in IE, and saw my <pre> tags being displayed incorrectly (according to my desire, not necessarily the code, which don't always align):

The above should have been two lines of text with a horizontal scroll bar. I want to say use scroll-bar for text that's too wide but expand vertically without a scroll bar: Never a vertical scroll bar, only ever a horizontal one.

I've spent a bit today scouring the web with not much help. I've randomly permuted css values for overflow, overflow-x, overflow-y, min-height, etc. Having failed that, I read everything I could find from randomly permuted search queries, one of which lead me to a depressingly long detail about IE6's expanding box problems. The page claims (and several others do, also) that IE7 fixes several box expansion problems.

I created a very small demo with minimal CSS to show the problem here: Click here to view the demo. It includes the solution I found, detailed below.

After some other random permutation, I gave up and tried wrapping the pre in a div and applying the overflow properties to the div. It worked. It's 2009 and I still have to deal with weird and obscure browser rendering inconsistencies. I came up with this:

<style>
  .scroll-wide {
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 500px;
  }

  /* On firefox, pre tags have a top and bottom margin > 0, which makes your 
   * scrolling div have a blank top line, which isn't what
   * we want. Fix one weirdness to find another? I didn't fully investigate.
   * Here's the fix: */
  div pre {
    margin-top: 0;
    margin-bottom: auto;
  }
</style>

...

<div class="scroll-wide">
  <pre>
    stuff
  </pre>
</div>

Solving this with wrap-pre-in-a-div can be automated with jQuery and a CSS definition:

// javascript
$("pre").wrap("<div class='pre-wrap'></div>");

// In CSS
div.pre-wrap {
  /* overflow/height/whatever options */
}

PS: If you use Meyer's reset.css, you'll want to include pre { margin-bottom: auto; } , or IE will again clip the bottom of the pre contents with the scrollbar.