Why is 'overflow:auto' CSS not working when using some browsers

Question

I went to Settings > Edit Theme > Advanced and added this to it, under <style type="text/css">, but it doesn't work:

pre { overflow: auto; }
code { background-color: LightGrey; padding: 1px 3px; }

The first statement doesn't take effect when accessed with Chromium (I expect a horizontal scroll to appear). The second one, which I added for demonstration purposes, works well.

Here's the page you can look at to see how well it doesn't work.

I've tested with these browsers:

• Chromium and Epiphany works not
• Firefox and Konqueror works

update:

Following a suggestion, I've tried all these whitespace properties inside the <pre> tag: normal, nowrap, pre, pre-line, and pre-wrap. The problem remains.

Answer 1

If you float .code left then it will work:

.code {float: left;}
pre { white-space: pre;}

Answer 2

To have a horizontal scroll bar show up, you need to add:

pre { white-space: nowrap; }

Answer 3

On the actual page you have the css:

pre { overflow: auto; white-space: pre-line; }

This is overwriting any other white-space declaration and therefore it will not have horizontal scroll. Changing this to white-space: nowrap fixes the problem.