Geek asks and answers

Horizontal scrolling corresponding to the width of the content

I have a page with the following structure:

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

The shell has a width of 320 pixels, and two div.item- about 600 pixels. I need the two to display inline (right now they are display: inline-block;, and the contents of the wrapper scroll horizontally. When I set the width div.contentto auto, it takes the width of the wrapper (320 pixels). A width of up to 200% will obviously make horizontal scrolling work, but how do I get div.contentto take the width of its contents to allow horizontal scrolling?

Note. The shell has a fixed width and height and has overflow-y: hiddenand overflow-x: scroll, because I don't want the vertical scroll to be horizontal.

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

As you can see, the red divs will flow vertically. Changing the width .contentto 200% (or some value) will cause the horizontal scroll to scroll properly. I want this to be done automatically, though, because I don’t know how many elements will be in the .contentdiv before starting work.

+5
source share
2 answers

Use white-space:nowrap;in.content

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

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

+21
source

You might have something like this:

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

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

.item {
    display: inline-block;
}
0

More articles:


All Articles