如何设置带有内部浮点的div样式以水平扩展以允许所有内部浮点的div都适合？

Question

Basically, I have a content box with some floating items:

html

<div class="contentBox">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

css

.contentBox {
    overflow-x:scroll;
}
.item {
    float:left;
}

I want the box to expand in width to let as many items as I add to it to fit, floating left (which means the elements get pushed to the right). But instead it only goes as wide as the page before the items drop down because of having no room. I want it to continue on outside of the page.

How do I do this?

I'm thinking I'll need to use some JavaScript, but I'd rather a pure CSS solution if it's possible.

Answer 1

You can use white-space: nowrap on parent container with inline-block child elements:

.contentBox {
    overflow-x: scroll;
    white-space: nowrap;
}
.item {
    display: inline-block;
}

Demo: http://jsfiddle.net/vo8202uy/

 $('button').click(function() { $('.contentBox').append('<div class="item">' + ($('.item').length+1) + '</div>'); }); 

 .contentBox { overflow-x:scroll; white-space: nowrap; } .item { width: 50px; background: coral; margin-right: 5px; display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="contentBox"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <button>Add more</button> 

Answer 2

You can set display: table-cell for .item .

Here's an example: http://jsfiddle.net/andunai/fq201q8b/

Answer 3

Here you GO :) Only add this on you button click.

$('button').click(function() {
  var item = $('.item').length + 1;
   $('.contentBox').append('<div class="item">' + item + '</div>');

   var w = window.innerWidth;
   var l = $(".contentBox div").length + 1;
   $(".contentBox div").each(function(){
        $(this).css("width", w/l);
   });
});

Check this JSFiddle Link http://jsfiddle.net/DynamicRemo/8krcm0x6/