Html 引导行切断列的底部

我现在在同一行上有两列，其中一列是可以动态添加tr的表。因此，当这张桌子几乎是空的时，它的高度非常小。我的另一列是固定高度，占页面的一半，因此当表格几乎为空时，它比我的表格列高。但是，当表处于接近空状态时，它会切断另一列的底部，以保持两列的高度相等。下面是它在那种状态下的样子：

下面是我的代码行减去每列的内部我也在使用Bootstrap的offcanvas插件：

<div class="row row-offcanvas row-offcanvas-right"> 
    <div class="components col-lg-12">
        <table class="table table-hover sortable" id="table">
    <div class="sidebar-offcanvas preview" id="sidebar">

---

另外，如果你想知道的话，我在那里的预览栏在点击按钮之前是关闭的。当它启动时，Components列被压缩为col-lg-8。抱歉，这让人困惑！非常感谢您的帮助

JSFIDLE上的一个例子对诊断这个问题非常有帮助，但我很确定这是由两列周围的容器造成的，因为浮动元素不扩展它们的父容器，所以它被截断了。@Joshuahitley那么修复方法是什么呢？