如何使中间嵌套 div 滚动和顶部和底部嵌套 div 保持位置固定？

Question

我有一个包含 3 个内部 div 的父容器。我只希望中间的内部 div 水平滚动。这是我的代码：

<div class="outer-container">
    <div class="top-inner-container">
        xoxoxoxoxoxo    
    </div>
    <div class="middle-inner-container">
        only this must scroll ===> yeah yeah yeah        
    </div>
    <div class="bottom-inner-container">
        oxoxoxoxoxox
    </div>
</div>

.outer-container {
    height: 470px;
    position: relative;
}
.top-inner-container {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 70px;
}
.middle-inner-container {
    white-space: nowrap;
    width: 1480px;
    background-color: grey;
    overflow-x: scroll;
    position: absolute;
    top: 60px;
    left: 0px;
    height: 340px; 
    display: flex; 
}
.bottom-inner-container {
    position: absolute;
    // background-color: #fff;
    width: 100%;
    top: 404px;
    left: 0px;
}

我尝试了很多变化，这是我得到的最好的，但这里所有 3 个 div 滚动。 知道如何解决这个问题吗？

更新： 重申。而不是让中间 div 水平滚动所有 3 个 div 滚动。滚动条出现在父级上，而不是仅出现在具有中间内部容器类的 div 上。期望的结果是只有具有中间内部容器类的 div 水平滚动。

重要
现在忽略垂直滚动。我只是意识到垂直滚动的工作内容更多。我不关心垂直滚动只是水平滚动。顶部和底部不应水平滚动，只有中间 div 应水平滚动。水平滚动时，“xoxoxoxoxo”应始终在屏幕上可见。谢谢。

这是fiddle

Answer 1

您可以通过将white-space: nowrap; 添加到.middle-inner-container 类来使中间容器水平滚动工作。

css 看起来像这样：

.outer-container {
    height: 470px;
    position: relative;
    width: 100%;
    .top-inner-container {
        width: 100%;
        height: 70px;
    }
    .middle-inner-container {
        white-space: nowrap;
        background-color: grey;
        overflow-x: scroll;
        height: 340px;
        .block {
            display: inline-block;
            vertical-align: top;
        }
    }
    .bottom-inner-container {
        // background-color: #fff;
        width: 100%;
        top: 404px;
        left: 0px;
    }
}

记得在中间 div 的每个小节中添加 class 块。