Div inside overflow="auto" to auto size its width to its contents

Question

Here is my HTML:

<div class="scrollingBox">
    <div class="container">
         <div class="item">Item</div>
         <div class="item">Item</div>
         <div class="item">Item</div>
         <div class="item">Item</div>
    </div>
</div

Here is my CSS:

.scrollingBox {
    height:100px;
    width:300px;
    overflow:auto;
}
.item {
    float:left;
    height:60px;
    margin:5px;
    width:100px;
}

The .container can contain any number of .items.

My problem at the moment is the .container will never go wider than the .scrollingBox, and the scrolling box ends up with a vertical scroll bar, and the .items end up stacking vertically. I give the .container a fixed height, but the .items stack vertically beyond this fixed height.

I want the .container to have no fixed width, so it can take any number of items. I want the scroll bar to be horizontal, and I also want the .items to stack horizontally.

My question:

What CSS do I apply to .container to make the .items stack horizontally?

the `.tems` should be floated next to each other until the end of `.scrollingBox` is reached, so basically there should be 3 items next to each other before they break. Do you want every item to be in one line and have the scrollingBox have a horizontal scrollbar as soon as there are more then 3 items? — Nico O, Feb 28 '14 at 10:45

score 8 · Accepted Answer · edited May 23 '17 at 12:03

By using float property, the elements are removed from document normal flow.

You can change their display type to inline-block too keep them in inline flow, and use white-space: nowrap; for the container (.scrollingBox) to keep the inline items beside each others, as follows

Here you go:

.scrollingBox {
    height:100px;
    width:300px;
    overflow:auto;
    white-space: nowrap;    /* Suppress line breaks */
}
.item {
    display: inline-block;  /* Display the items as inline-block            */
    vertical-align: top;    /* Align the inline items vertically at the top */
    height:60px;
    width:100px;
}

WORKING DEMO.

Note: You can refer my answer to remove the white space between inline-block elements.

score 1 · Answer 2 · edited May 23 '17 at 12:20

Add display:inline-block to your .item
The default display for DIVs is block and this cause a vertical stack, But display:inline-block makes all DIVs to arrange them self in a horizontal line

Difference of varient display options:

Inline elements:

Respect left & right margins and padding, but not top & bottom
Cannot have a width and height set
Allow other elements to sit to their left and right.

Block elements:

Respect all of those
Force a line break after the block element

Inline-block elements:

Allow other elements to sit to their left and right
Respect top & bottom margins and padding
Respect height and width.

Derived from Oldskool answer
More info in W3schools

Div inside overflow="auto" to auto size its width to its contents

2 Answers2