Hide scrollbar in pre if not needed

33
votes

The spec says that a horizontal scrollbar is supposed to be always shown if overflow-x: scroll is set.

On my website I often post code in a <pre>-Block. As this has no predefined width, but the surrounding div does have a maximum (defined as percentage), it seems that I can not figure out how to achieve the following: In case a code block is not too wide, hide the horizontal scrollbar. If it exceeds the width, show a scrollbar. Any hints? I think I have tried most of the combinations of overflow-x and -y, but none seem to do what I want.

1
htmlcss
Uh, you’re already using overflow: auto on your site and it works. Why the question? - Konrad Rudolph
Ok, maybe it is a problem with my browser: But both on FF 3.0 and FF 3.5 I see this. - data
No one else is seeing the issue. Maybe you're logged in and as such get a different set of style sheets? - Steve Perks

1 Answers

101
votes

Use:

overflow-x: auto;

auto tells the browser to only show a scrollbar if the content exceeds the width of the box.