HTML CSS Horizontally stacked elements 1 fills remaining width - html

Question

Update: This is the closest to a solution so far: http://jsfiddle.net/bfcr62yd/11/
I am having trouble solving the following problem. In short, I need one element to fill the remaining width, where all other elements that are all stacked horizontally have fixed widths.
The UI has 5 wrapper elements that need to be stacked horizontally with a fixed min-width. The 2 elements on the left and the 2 elements on the right have fixed widths. The center wrapper element width needs to dynamically fill the remaining width. The center element has a child element that has a very large fixed width. If the responsive parent width is smaller than the child fixed width, I would like the child to overflow-x: scroll (hide the remaining width and view it via scroll).
<div>
<div class="box dates"></div>
<div class="box dates_presets"></div>
<div class="box groupings"></div> <!-- to fill remaining width -->
<div class="box columns"></div>
<div class="box columns_video"></div>
</div>
My attempts so far:
http://jsfiddle.net/bwgrwgnz/1/
http://jsfiddle.net/hycd4non/13/
I have found this simple example that works with only 2 elements: http://jsfiddle.net/SpSjL/

Answer 1

Try using display: table | table-row | table-cell:
.table { display: table; width: 100%; } /* set the width to your maximum width value */
.tr { display: table-row; }
.tr div { display: table-cell; }
you also need to remove all of the floats from your 'table-cell' elements
JSFiddle Demo

Answer 2

And, one more no-flexbox solution. Problem was to force scrolling. One more or less dirty hack made it!
http://jsfiddle.net/d4n2fnpy/1/
#table {
display:table;
width:100%;
table-layout:fixed;
}
.box {
border: 2px dashed #00f;
min-height: 100px;
padding-right: 10px;
display:table-cell;
word-wrap:break-word;
}
.dates {
width: 200px;
}
.dates_presets {
width:200px;
}
.groupings {
overflow-x: scroll;
word-wrap:initial!important;
display:block!important;
width:auto;
}
.columns {
width:200px;
}
.columns_video {
width: 200px;
}
P.S. Set overflow-x: auto; to remove ugly scroler when there is no need for it...

Answer 3

Are you looking for something like this? http://jsfiddle.net/DIRTY_SMITH/bfcr62yd/14/
I restructured it but I think this is what you wanted
HTML
<div id="container">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3">
<div class="inside-div">
blah blah blah blah blah blah blah blah blah blah blah blah
</div>
</div>
<div class="box-4"></div>
<div class="box-5"></div>
</div>
CSS
#container{width: 100%;}
.box-1, .box-2, .box-4, .box-5{width: 200px; height: 100px; background-color: blue; float: left;}
.box-3{width: calc(100% - 800px); height: 100px; overflow-x: scroll; overflow-y: hidden;background-color: red; float: left;}
.inside-div{height: 50px; width: 400px;}
.mini-box {
padding: 5px;
margin: 5px;
border: 1px solid red;
width: 20px;
}

Answer 4

I added a width using Calc(). It's pretty straight forward. I have it here: http://jsfiddle.net/bwgrwgnz/3/
width: calc(100% - 770px);
But to be honest, flexbox is probably the way you want to go if you can deal with the lack of support in older browsers.
Ps. calc() isn't supported everywhere either.
Edit: There is a table example above as well which could work well.

Answer 5

My solution using tables: http://jsfiddle.net/bwgrwgnz/41/
.box {
border: 2px dashed #00f;
height: 100px;
width: 50px;
}
.dynamic-box {
width:auto !important;
}
.dynamic-box-fixed-inner {
display:block !important;
overflow-x:scroll;
}
.inner-item {
position:inline-block;
padding:5px;
}
.table { display: table; width: 100%; table-layout:fixed; }
.tr { display: table-row; }
.tr div { display: table-cell; }
<div class="table">
<div class="tr">
<div class="box">a</div>
<div class="box">b</div>
<!-- this element should fill the remaining width -->
<div class="box dynamic-box">
<div class="dynamic-box-fixed-inner">
<div class="inner-item">item</div>
<div class="inner-item">item</div>
...
</div>
</div>
<div class="box">d</div>
</div>
</div>