Javascript 如何使内分区溢出：滚动保持在外分区内？

我在一个div中的另一个div中有一个表，如下所示：

<div id="outer">
    <div class="inner">
        <h4>Search results</h4>
        <table>
            <tr><th>Internal user</th><th>External domain</th><th># in</th><th>Last in</th><th># out</th><th>Last out</th><th>Is member</th></tr>
            <tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
            <!-- Lots more data rows -->
        </table>
    </div>
</div>

搜索结果
内部用户外部域#嵌入#最久的outIs成员
人员姓名company.com1020/07/2014 13:001121/07/2014 11:00号

表体由javascript动态生成。
外部div具有

位置：固定


内部div有溢出：滚动
，应始终填充外部div，但决不能超出其边界

此外：


如果外部div的
bottom
设置为
auto
，则内部div和外部div都应展开以适合整个表；或
如果外部div的
bottom
设置为任何固定值（例如“10px”），则内部div应保持在外部div内

根据我是将外部div
right
设置为
auto
还是一个固定值，两个div的宽度都应该应用类似的规则

我的计划是在外部div上从
bottom:auto
开始，同时javascript生成表体，因此两个div都会扩展以适应表。

然后，在表格完成后，我将外部div的大小与视口大小进行比较。
如果外部div的自动大小适合视口，我将其保留为
auto
，否则我将设置固定值以使其适合视口，用户可以滚动查看表的其余部分

当我在javascript中更改的唯一属性位于外部div上时，是否有一组CSS规则可以实现这一点

我最接近的方法是在内部div上同时设置
高度：100%
和
宽度：100%
。唯一的问题是内部div的滚动条超出外部div几个像素

我也试过：


不在内部div上设置任何维度。这使得它总是按照表的大小，忽略外部div的大小；及
将
位置：内部div上的绝对
和左/上/右/下全部设置为0。当外部div的大小为
自动
时，这会使两个div的大小都变为零


如果只使用一个div而不是两个div，这会更简单，但是两个不同颜色的边框在为其设计的web应用程序中提供了更好的对比度

这里有一个JSFiddle:
需要将
高度：100%
添加到外部和内部
div

需要将
高度：100%
添加到外部和内部
div

您可以使用
：：before
和
：：after
伪元素添加多个边框。请参阅@Joebot-这可能很有用，除了使用
溢出：scroll
，当我想将伪元素边框显示在滚动条外部时，伪元素边框会显示在滚动条内部。@Joebot-请为链接投票。我不知道
outline
属性，该属性可以生成我想要的外观和行为。您可以使用
：before
和
：：after
伪元素添加多个边框。请参阅@Joebot-这可能很有用，除了使用
溢出：scroll
，当我想将伪元素边框显示在滚动条外部时，伪元素边框会显示在滚动条内部。@Joebot-请为链接投票。我不知道
outline
属性，它可以产生我想要的外观和行为。这没有帮助。当外部div上的
height:100%
时，它会忽略
bottom
属性，并且我无法使两个div的初始大小都适合表格。它还会使两个div都延伸到视口的底部，这没有帮助。当外部div上的
height:100%
时，它会忽略
bottom
属性，并且我无法使两个div的初始大小都适合表格。它还使两个div都延伸到视口的底部。
#outer {
    display: block;
    position: fixed;
    left: 1px;
    top: 40px;
    width: auto;
    right: auto;
    bottom: auto;
    z-index: 1000;
    border: 2px solid silver;
    height: 100%;
}
#outer .inner {
    background-color: white;
    border: 1px solid black;
    padding: 2px;
    overflow-y: scroll;
    height: 100%;     
}