Bootstrap表溢出父css

Question

我有一个bootstrap行，其中包含一个带有表格的div。由于未知原因，我无法让表停止溢出父级。当我使用100％的高度时，表总是溢出。但是，如果父div具有特定高度，则它可以工作。

 <div id="itemDetails">
 <div class="row">
    <article id="itemImage" class="col-md-2">
        ...
    </article>
    <article id="details" class="col-md-3">
        ...
    </article>
    <aside id="contributions" class="col-md-5 col-md-offset-2 well well-lg">
        <h4 translate="" class="ng-scope">contributions</h4>
        <!-- ngIf: !vm.data.anyContributions -->
        <div id="contTable">
            <!-- ngIf: vm.data.anyContributions --><table ng-if="vm.data.anyContributions"    class="table ng-scope">
                <tbody>
                    <!-- ngRepeat: contribution in vm.data.contributions -->
                    <tr>.......</tr>
                    .
                    <tr>.......</tr>
                </tbody>
            </table><!-- end ngIf: vm.data.anyContributions -->
        </div>
    </aside>
</div>
</div>

以下是相关的sass代码

#itemDetails {

   height:100vh;

   div:first-child {
      height:45%;
   }
}
}

#contributions {

    max-height: 100%;

    #contTable {
      height: 100%;
      overflow: auto;
    }

    table {
        height: 100%;
        width: 100%;
    }

}

修改

我刚刚编写了一个用于解决问题的代码http://codepen.io/anon/pen/OPbVEZ。正如你所看到的，我设法隐藏了表的溢出但我无法在旁边底部和表之间添加一些填充