沿底部堆叠的水平div是隐藏容器滚动条下的滚动条

Question

我希望底部有一个未确定数量的div，水平叠加。当有太多不适合时，它们将是可滚动的。

div里面有一个列表。当此列表增长时，它将具有垂直滚动条。问题是该垂直滚动条的底部位于父水平滚动条下方。如何在外部水平滚动条显示或不显示的情况下使整个滚动条可访问？

我正在使用chrome，问题看起来比IE更严重。

JSFiddle

这是我的html，其中重复了类窗口

减少HTML

<div class="outer">
    <div class="window">
        <div class="heading">heading</div>
        <div class="list">
        listing<br>..... repeated ....
        </div>
    </div>
    ..... window class repeated ....
</div>

CSS

body
{
    overflow: scroll;
}
.outer
{
    position: fixed;
    height: 200px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    border: 1px solid red;
    white-space: nowrap;
}
.window
{
    border: 1px solid blue;
    background-color: White;
    width: 200px;
    height: 100%;
    display:inline-block;
    white-space:normal;

}
.heading
{
    color: purple;
    background-color: #c0c0c0;
}
.list
{
    overflow-y: scroll;
    height: 100%;
}

Answer 1

Chrome正在做一些古怪的定位。填充底部：20px似乎可以在Chrome中修复它而不会搞砸IE或Firefox。我没有在Safari上测试，但也应该在那里工作。

body
{
    overflow: scroll;
}
.outer
{
    position: fixed;
    height: 200px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    border: 1px solid red;
    white-space: nowrap;
    padding-bottom: 20px;
}
.window
{
    border: 1px solid blue;
    background-color: White;
    width: 200px;
    height: 100%;
    display:inline-block;
    white-space:normal;

}

.heading
{
    color: purple;
    background-color: #c0c0c0;
}
.list
{
    overflow-y: scroll;
    height: 100%;
}