CSS:左位置：250px，但溢出隐藏

我有一个侧边栏，由JS通过css动画显示和隐藏。为此，我需要将content div（

#main

）定位为

左：250px

#main {
  left: 250px;
  position: relative;
  overflow: hidden;
}

在
#main
-div中有一些内容。比如一张大桌子

<div id="sidebar">
    SIDEBAR
</div>
<div id="main">
    <table style="width: 100%" class="table">
        <tr>
            <td>SOME BIG CONTENT1...</td>
            <td>SOME BIG CONTENT2...</td>
            <td>SOME BIG CONTENT3...</td>
            <td>SOME BIG CONTENT4...</td>
            <td>SOME BIG CONTENT5...</td>
            <td>SOME BIG CONTENT6...</td>
        </tr>
    </table>
</div>


边栏
一些重要的内容1。。。
一些重要的内容2。。。
一些重要的内容3。。。
一些重要的内容4。。。
一些重要的内容5。。。
一些重要的内容6。。。

我的问题：如何防止水平滚动条

看

编辑：KCarnaille的解决方案：
看

唯一的问题是缺少对旧浏览器（）的支持。
Add to#main:

它可以与您提供的小提琴配合使用。
您可以做到这一点，它可以与侧边栏一起制作动画

查看您的

我只需添加
overflow:hidden添加到主体中，因为您已经在使用JS执行该操作，所以您可以简单地附加一个类以防止溢出。将表格换成列表，让网络成为一个更好的地方。如果您感兴趣，可以使用flexbox addin overflow执行类似操作：隐藏到正文不起作用。你不明白，这是一个动态的（可能是看不见的）侧边栏。所以对于过渡，我需要左位置。请参阅更新的示例以了解我的意思：很好的解决方案。我只是尝试了一个更复杂的版本（见new fiddle，它也能工作）。唯一的问题是缺少对旧浏览器的支持。真的！LGSon的解决方案可能会更干净一些。
 width: calc(100% - 250px);

.sidebar-open #main {
  margin-left: 250px;
}