Make non-wrapping div expand when content overflows the page

Question

When a div has white-space: pre and has too much content, it will overflow the page, adding a scrollbar. How do I get the div to be as wide as it expands to?

Example: http://jsfiddle.net/TkcTZ/1/

If you scroll to the right, you'll see that the background only extends to the right of the viewport, not past the edge behind the overflowing text. If you inspect the div with web tools, you will see that it is because the div is only as wide as the background.

How do I make divs expand widthwise when their content overflows? I would like a CSS/HTML only solution (no javascript).

Try this: word-wrap: break-word; – Ali Gajani Aug 13 '13 at 02:33 — Ali Gajani, Aug 13 '13 at 02:33
@AliGajani I don't want word wrapping. – Johnny Test Aug 13 '13 at 02:46 — Johnny Test, Aug 13 '13 at 02:46

score 2 · Answer 1 · answered Aug 13 '13 at 02:32

2

display: inline-block; to the rescue!

div {
    white-space: pre;
    background-color: red;
    display: inline-block;
}

answered Aug 13 '13 at 02:32

dezman

18,087
10
53
91

I can't make it inline-block, because each one needs to be on its own line, and it needs to take up 100% width as well, like a normal div. Doing inline-block with `width: 100%` has the same problem. – Johnny Test Aug 13 '13 at 02:45

score 2 · Accepted Answer · answered Aug 13 '13 at 21:01

2

I seem to have fixed it by setting display: table and width: 100% on the containing div, like so: http://jsfiddle.net/TkcTZ/3/

answered Aug 13 '13 at 21:01

Johnny Test

107
1
7

score 0 · Answer 3 · answered Aug 13 '13 at 02:32

0

The following updated fiddle should work for you:

http://jsfiddle.net/TkcTZ/2/

I have update the code with overflow:auto; This makes sure that div covers all its content with its background.

answered Aug 13 '13 at 02:32

AdityaSaxena

2,147
11
16

score 0 · Answer 4 · answered Aug 13 '13 at 02:39

0

You can use overflow: auto to make the div scrollable so that the background color takes the 100% of the div width.

div {
    white-space: pre;
    background-color: red;
    overflow: auto;
}

Check this http://jsfiddle.net/nkHGZ/

answered Aug 13 '13 at 02:39

Ashis Kumar

6,494
2
21
36

I can't make the div scrollable, it is contained within another div that controls the scrolling, as in the jsfiddle. – Johnny Test Aug 13 '13 at 02:43

Make non-wrapping div expand when content overflows the page

4 Answers4

Linked