Horizontal scrollbar not appearing in a DIV

I am attempting to create a table containing two cells, with each cell containing a scrollable DIV that sizes to 100% of the cell.  The DIVs will contain content that may be wider than the DIV so they will need horizontal scrollbars.  The table must also be able to be set to a fixed size or a percentage.  I am running into a problem where the DIVs size correctly to the cells, but only a vertical scrollbar appears for content within the DIVs that is clearly larger than the DIV in both height and width.  I am currently running IE6 on XP and have the same problem in IE6 on Win2000.  At the moment, I am only concerned with this working in IE5.5 and IE6.0.  Example HTML:

<table border=1 style="table-layout: fixed; width: 100%; height: 50%;">
<tr>
    <td style="width: 50%">cell 1
        <div style="background-color: red; width: 100%; height: 100%; overflow-x: scroll; overflow-y: scroll;">cell 1 div 1
            <div style="width: 500px; height: 500px; background-color: gray">cell 1 div 1 div 1
            </div>
        </div>
    </td>
    <td style="width: 50%">cell 2
        <div style="background-color: blue; width: 100%; height: 100%; overflow: scroll;">cell 2 div 1
            <table border=1 style="table-layout: fixed; width: 600; height: 500; background-color: green;">
            <tr>
                <td style="width: 300px">cell 2 div 1 table 1 cell 1</td>
                <td style="width: 300px">cell 2 div 1 table 1 cell 2</td>
            </tr>
            </table>
        </div>
    </td>
</tr>
</table>