HTML CSS Horizontally stacked elements 1 fills remaining width

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

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>