DIV sizing/scrolling with gridster and scrolling

[Ella555]

Here's a jsfiddle showing the problem: http://jsfiddle.net/FQxYB/9/To avoid posting error "don't just link to fiddle"... here's the fiddle details (why can't this be done automatically by stackoverflow?).Fiddle HTML:\[code\]<div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <div class='portlet'> <span>Something small that fits</span> </div> </li> <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"> <div> <span>Something like a header</span> </div> <div class='portlet'> <table> <tr> <td>r1 c1</td> <td>r1 c2</td> </tr> <tr> <td>r2 c1</td> <td>r2 c2</td> </tr> <tr> <td>r3 c1</td> <td>r3 c2</td> </tr> <tr> <td>r4 c1</td> <td>r4 c2</td> </tr> <tr> <td>r5 c1</td> <td>r5 c2</td> </tr> <tr> <td>r6 c1</td> <td>r6 c2</td> </tr> <tr> <td>r7 c1</td> <td>r7 c2</td> </tr> <tr> <td>r8 c1</td> <td>r8 c2</td> </tr> <tr> <td>r9 c1</td> <td>r9 c2</td> </tr> <tr> <td>r10 c1</td> <td>r10 c2</td> </tr> </table> </div> </li> </ul>\[/code\]Fiddle Code:\[code\]$(function(){ $(".gridster ul").gridster({ widget_margins: [15, 15], widget_base_dimensions: [100, 100] });});\[/code\]Fiddle CSS:\[code\].portlet{ height: 100%; width: 100%; overflow: auto;}.gridster { position:relative; background-color: gray;} li { background-color: white; width: 150px; height: 150px; border: solid 2px black;}.gridster > * { margin: 0 auto; -webkit-transition: height .4s; -moz-transition: height .4s; -o-transition: height .4s; -ms-transition: height .4s; transition: height .4s;}.gridster .gs_w{ z-index: 2; position: absolute;}.ready .gs_w:not(.preview-holder) { -webkit-transition: opacity .3s, left .3s, top .3s; -moz-transition: opacity .3s, left .3s, top .3s; -o-transition: opacity .3s, left .3s, top .3s; transition: opacity .3s, left .3s, top .3s;}.ready .gs_w:not(.preview-holder) { -webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s; -moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s; -o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s; transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;}.gridster .preview-holder { z-index: 1; position: absolute; background-color: #fff; border-color: #fff; opacity: 0.3;}.gridster .player-revert { z-index: 10!important; -webkit-transition: left .3s, top .3s!important; -moz-transition: left .3s, top .3s!important; -o-transition: left .3s, top .3s!important; transition: left .3s, top .3s!important;}.gridster .dragging { z-index: 10!important; -webkit-transition: all 0s !important; -moz-transition: all 0s !important; -o-transition: all 0s !important; transition: all 0s !important;}/* Uncomment this if you set helper : "clone" in draggable options *//*.gridster .player { opacity:0;}*/\[/code\]Fiddle resource: http://gridster.net/dist/jquery.gridster.jsFor the second square (lower one) I need the bottom div to not exceed the bounds of the LI.Roughly speaking the "header" div's content may be any size (header contents vary depending on context). But the "body" div's content needs to show a scroll bar if necessary and stay inside the bounds of the LI.I'm "lost as sea". I've tried a raft of different schemes... but none have even come close (mostly variations using wrapping div's with display: table/table-row/table-cell).Thanks a ton for any assistance!