CODEWITHSUNDEEP
htmlcss
data
data

Reputation: 2543

Hide scrollbar in pre if not needed

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.

Upvotes: 34

Views: 29812

Answers (1)

Konrad Rudolph
Konrad Rudolph

Reputation: 545488

Use:

overflow-x: auto;

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

Upvotes: 104

Related Questions