## Long code overflow behaviour

When the HTML pre element uses the CSS width and overflow: auto properties, code that doesn't fit within the width of the pre element is clipped and a scroll-bar appears which can be used to view the remaining code.

However, when it contains only one line of code, we see a couple of issues in Firefox 3.6 and IE6. Here is a sample page that demonstrates the issue: http://susam.in/files/notes/css-hacks/pre-overflow/pre-overflow.html. Here is the CSS used for the HTML pre element.

pre {
border: 1px solid black;
background: #ddccff;
width: 20em;
overflow: auto;
}


Firefox 3.6 doesn't display the scroll-bar if the pre element contains only one line of code. It is still possible to scroll the code though by using the arrow-keys on the keyboard or selecting text in the code with the mouse and moving right.

Output in Firefox 3.6

Chrome does the right thing and displays the scroll-bar.

Output in Chrome 11

Internet Explorer 6 always hides the last line of the code behind the scroll-bar. Therefore, when there is only one line of code, the scroll-bar hides this only line of code and no code is visible.

Output in Internet Explorer 6
[css]

### 1 comment

#### Matthijs Kooijman said:

I've been struggling with the same problem and managed to fix it by making the pre box slightly bigger. I'm now using min-height: 2.5ex; to make it slightly bigger than one line of text, which fixes the problem at least in Firefox 5, Firefox 6 and Chrome 13. I haven't tested it in IE.

An alternative fix was to apply padding-bottom: 3px; to the pre element.