Css table-cell rule and auto width overflowing - html

Question

I'm having an issue using display: table and display: table-cell.
Fiddley: http://jsfiddle.net/5q51sbqb/1/
I have a div with a display:table; and within that two divs with display:table-cell;
The left div (.t1) is a fixed width and the right div(.t2) should take up the rest of the space to the edge of the container.
My issues lies with adding a long div (2000px) to the right div(.t2). I basically need the content-window to stay the same width as its parent without pushing out further than the confines of the container, as to allow the content within to be scrolled.
Keep in mind this needs to be without using a fixed width, as the container and t2 are both responsive. And I also have to use table and table-cell display properties :(
So basically the children of the .t2 div are flowing beyond the container when I need them to fit within the container width ( without setting a fixed width on the content-window ... and on the .t2 div)
I'm stumped.
HTML
</div>
</div>
<div class="table-cell t2">
<div id="content-window">
<div id="content"></div>
</div>
</div>
</div>
</div>
CSS
#container{
width: 600px;
height: 600px;
margin: 0px auto;
background-color:green;
padding: 2px;
}
#table{
display:table;
width:100%;
}
.table-cell{
display:table-cell;
height: 300px;
padding:2px;
}
.t1{
width: 100px;
background-color: red;
}
.t2{
width:auto;
background-color: blue;
}
#content-window{
width:100%;
overflow:scroll;
}
#content{
width: 2000px;
height: 50px;
background-color:yellow;
}

Answer 1

Since you smartly created a #content-window, set it to be a position: absolute; so it won't mess up the cell's auto width. Just remember to set the .t2 to be a position: relative, so the #content-window might fill it in width and height, using the contained space of the right table cell.
tip: Use overflow-x if you want it to scroll only horizontally.
#container{
width: 600px;
height: 600px;
margin: 0px auto;
background-color:green;
padding: 2px;
}
#table {
display:table;
width:100%;
}
.table-cell{
display:table-cell;
height: 300px;
padding:2px;
}
.t1 {
width: 100px;
background-color: red;
}
.t2 {
position: relative;
background-color: blue;
}
#content-window{
position: absolute;
width:100%;
height: 100%;
overflow: hidden;
overflow-x: scroll;
height:50px;
}
#content{
width: 2000px;
height: 50px;
background-color:yellow;
}
Check it here: http://jsfiddle.net/5q51sbqb/4/