Horizontal Scrolling, fit to Content Width

Question

I have a page with the following structure:

div.wrapper > div.content > div.item + div.item

The wrapper has a width of 320px, whereas the two div.item come out to around 600px. I need those two to be displayed inline (right now they are display: inline-block;, and have the wrapper's contents scroll horizontally. When I set the div.content width to auto, it takes the width of the wrapper (320px). Setting the width to 200% obviously gets the horizontal scrolling to work, but how do I get div.content to take on the width of its contents to allow for horizontal scrolling?

Note: The wrapper is set to a fixed width and height and has overflow-y: hidden and overflow-x: scroll set, because I do not want vertical scrolling-- only horizontal.

JSFiddle with an example: http://jsfiddle.net/kh5k7/

As you can see, the red divs will vertically stack. Changing the .content width to 200% (or some value) will cause horizontal scrolling to occur properly. I want this done automatically though, because I have no clue how many elements are going to be in the .content div before hand.

can you post your html+css in jsfiddle?

Oswaldo Acauan
– Oswaldo Acauan

2012-07-13 19:53:53 +00:00
Commented Jul 13, 2012 at 19:53 — Oswaldo Acauan
– Oswaldo Acauan, Commented Jul 13, 2012 at 19:53
Done. jsfiddle.net/kh5k7

Andrew M
– Andrew M

2012-07-13 19:59:36 +00:00
Commented Jul 13, 2012 at 19:59 — Andrew M
– Andrew M, Commented Jul 13, 2012 at 19:59

Musa · Accepted Answer · 2012-07-13 20:13:17Z

29

Use white-space:nowrap; on .content

.content{
   width: auto;
   white-space:nowrap; 
}

http://jsfiddle.net/kh5k7/1/

edited Jul 13, 2012 at 20:13

answered Jul 13, 2012 at 20:07

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

António Ribeiro · Accepted Answer · 2016-01-28 16:17:43Z

3

You can have something like this:

.wrapper {
    overflow-x: auto;
    overflow-y: hidden;
}

.content {
    width: auto;
    white-space: nowrap;
}

.item {
    display: inline-block;
}

answered Jan 28, 2016 at 16:17

António Ribeiro

4,2305 gold badges35 silver badges51 bronze badges

Collectives™ on Stack Overflow

Horizontal Scrolling, fit to Content Width

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related