Creating a variable width <pre> element with optional scrollbars

Question

I want to add div to my website which has variable width, and that it will display scroll bars when the width is smaller than the longest line. I tried wrapping such a fixed width element, in a variable width (100%) but that didn't work. I got the scroll bars on the entire page.

Any thoughts?

Thanks Yaron

Answer 1

You can apply the overflow CSS property to the problematic div:

#problematic-div {
    overflow: hidden;
}

This defines what happens to content that overflows the content area of an element. For the value scroll, user agents are supposed to provide a scrolling mechanism whether or not it is actually needed; thus, for example, scrollbars would appear even if all content can fit within the element box.

You can try some examples here.

Hope it helps.