Horizontally scrolling div within display:table div? - html

Question

I am able to make a horizontally scrolling div using the following:
CSS
.scroll {
width:100%;
height:100px;
overflow-x:auto;
white-space:nowrap;
}
.box {
width:200px;
height:100%;
display:inline-block;
vertical-align:top;
}
HTML
<div class="scroll">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
However, once this is nested inside a div with display:table, the .scroll div no longer scrolls and instead stretches the .scroll div to show all of the boxes.
Pretty sure there's an easy fix for this, any ideas?
For reference: http://jsbin.com/makigome/29/edit?html,css,output

Answer 1

Try this CSS, hope it helps
.table {
display: block;
width:100%;
}
.table-cell {
display:block;
width:100%;
}
.scroll {
height:100px;
width:100%;
overflow-x:auto;
border:1px solid red;
white-space:nowrap;
margin:10px 0px;
}
.box {
width:200px;
height:100%;
background:orange;
display:inline-block;
vertical-align:top;
}

Answer 2

Is not possible using table and table cell, you can do it using float like this:
.table {
float:left;
width:100%;
}
.table-cell {
float:left;
width:100%;
}
.scroll {
clear:both;
height:100px;
width:100%;
overflow-x:auto;
border:1px solid red;
white-space:nowrap;
margin:10px 0px;
}
.box {
width:200px;
height:100%;
background:orange;
display:inline-block;
vertical-align:top;
}

Answer 3

For anyone interested, I fixed this by setting position:absolute to the .scroll div and wrapping it within another div with position:relative like so:
http://jsbin.com/makigome/39/edit?html,css,output
<div class="table">
<div class="table-cell">
<div class="scroll-wrapper">
<div class="scroll">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
</div>
.table {
display:table;
width:100%;
}
.table-cell {
display:table-cell;
width:100%;
}
.scroll-wrapper {
height:100px;
position:relative;
}
.scroll {
height:100%;
width:100%;
overflow-x:auto;
white-space:nowrap;
position:absolute;
}
.box {
width:200px;
height:100%;
display:inline-block;
vertical-align:top;
}