Html CSS在内容外部设置滚动条

我有一个有两列的表。当第一列大于窗口高度时，它必须具有滚动。所以我在单元格内使用高度为100%的div并自动滚动

我的问题是当“手机”有滚动条时，他的内容被滚动条隐藏了

这是我的html：

<div id="table">
    <div class="sidebar">
        <div>
            <a href="/">Link 1</a>
            <a href="/">Link 2</a>
            <a href="/">Link 3</a>
            <a href="/">Link 4</a>
            <a href="/">Link 5</a>
            <a href="/">Link 6</a>
            <a href="/">Link 7</a>
        </div>
    </div>
    <div class="content">Content page</div>
</div>

这是我的小提琴：

请将页面模拟为高度200px，以便看到第一列（由于滚动条）隐藏了他的内容

我需要在不设置单元格像素宽度的情况下修复此问题

我也不想使用javascript

无论如何，当“单元格”有滚动条时，是否可以显示所有内容而不隐藏它

编辑：似乎在chrome中工作正常，但在firefox（50）中却不行

从firefox打印：

---

在铬合金中似乎工作正常。我没有在IE11中看到任何滚动条。你的目标浏览器是什么？哦。。。似乎在Chrome中工作符合我的需要…似乎在Chrome中工作良好。我没有在IE11中看到任何滚动条。你的目标浏览器是什么？哦。。。似乎在Chrome中按我的需要工作。。。。

*{margin:0px; padding:0px;}
body,html{width:100%; height:100%}
#table{display:table; width:100%; height:100%; background:#eee;}
#table div.sidebar{display:table-cell; vertical-align:top; height:0px; overflow:hidden; background:#4d5b69;}
#table div.sidebar div{height:100%; overflow-x:hidden; overflow-y:auto;}
#table div.sidebar a{display:block; padding:7px 0px 7px 0px; font-weight:bold; white-space:nowrap; border-bottom:1px solid #5b7289; color:#fff;}
#table div.sidebar a span{color:#fff;}
#table div.sidebar a i{min-width:20px; color:#fff; display:inline-block;}
#table div.sidebar a:hover{background:#364a5e}
#table div.sidebar a.logo{padding:10px; text-align:center; font-size:40px;}
#table div.content{display:table-cell; width:100%; height:100%; vertical-align:top; padding:10px;}