如何防止動態創建的表溢出其div？

Question

這是正在發生的事情的圖片。 我想要垂直和水平滾動條和表格來填充它的容器 div 而不是溢出。

顯示的分隔線來自名為 gridsplit 的 jquery 庫。

<script src="dist/jquery.gridsplit.optimised.js"></script>

表 header 是硬編碼的，但正文是動態創建的。

這是一次嘗試的 html：

 <div style="float:left; overflow:auto; width:100%; height:95%">
            <div id="grid4" class="grid">
                <div class="innerGrid">
                    <div id="leftCol" class="gridColumn" gs-width="15%">
                        <div class="gridCell" gs-height="60%">
                            <div class="fillCell">
                                <div id="parent">
                                    <select id="selectWatchlist" style="float:left"><option value="My Portfolio">My Portfolio</option></select>
                                    <button id="addSymbol" type="button" class="btn btn-primary"> 
                                        <i class="glyphicon glyphicon-plus-sign"></i> Syms
                                    </button>
                                </div>
                                <div style="display:table-cell">
                                    <table id="watchlist" style="width:100%; border:0; cellpadding:0; cellspacing:0; margin-bottom:5px;">
                                        <tr>
                                            <th>Sym</th><th>Price</th><th>% Change</th>
                                        </tr>
                                    </table>     
                                </div>                       
                            </div>
                        </div>
                        <div class="gridCell" gs-height="40%">
                            <div class="fillCell"><a>Notes</a></div>
                        </div>

我整天都在谷歌搜索，嘗試了幾十種組合都無濟於事。 建議？

Answer 1

解決方案是像這樣簡單地添加display:block ：

.gridCell .fillCell {
  height: 100%;
  display: block;
  overflow:auto;
}

現在它有滾動條並且不會溢出。 這是一張照片：

我可以發誓我試過了，但顯然沒有。