overflow:auto property only adding a horizontal scrollbar? - css

Question

I [unfortunately] have a table inside of a table. The last <td> of the outer table looks like so:
<td class="valign-top width-40 padding-right-4px">
<div class="grid-filter-container" style="overflow:auto;">
<table id="FilterColumns" class="fullwidth fimscaletable">
<thead>
<tr>
<th class="width-25 textalign-left k-header k-grid-header">
<span class="text-white">Field Name</span>
</th>
<th class="width-75 textalign-center k-header k-grid-header">
<span class="text-white">Condition</span>
</th>
</tr>
</thead>
<tbody></tbody>
<tbody></tbody>
</table>
</div>
</td>
The inner table programatically gets rows added to it, it's part of a data exporting module. The user is presented with a list of fields on the left, and then they can select it from the list and set some parameters and add it to this table on the right.
As you can see, the <div> containing the inner table has its overflow property set to auto. But during run time it only "gains" a horizontal scrollbar:
The table on the right started as the same size as the control on the left, but as I add more conditions to it, it grows in height. I want it to instead just scroll the div. Note this screenshot was taken in IE; haven't tested other browsers yet.
The grid-filter-container class is defined as so:
.k-window .grid-filter-container {
border: solid 1px #909090;
min-height: 200px;
padding: 0px;
margin: 0px;
}
js fiddle is actually blocked by my company's internet filters, otherwise I'd try to provide a sample.

Answer 1

Add height to the container
.k-window .grid-filter-container {
border: solid 1px #909090;
min-height: 200px;
padding: 0px;
margin: 0px;
height: 200px;
}