Html 将垂直滚动从页面移动到内部div

我在

上有一个没有垂直滚动的页面，我想您正在寻找flex box解决方案。要想让它在所有现代浏览器上都能正常工作，需要付出一定的爱心和细心，所以请看一看有关这方面的信息

值得指出的是，这根本不适用于旧的浏览器版本，如果支持必不可少，则需要使用JavaScript替代


html，正文{
身高：100%；
保证金：0；
}
#包装纸{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
#标题{
高度：50px；
背景色：红色；
}
#内容{
弹性：1；
显示器：flex；
最小高度：0；//FF修复
背景颜色：黄色；
}
.可滚动{
宽度：50%；
溢出y：自动；
浮动：左；
显示：内联块；
}
#页脚{
背景颜色：绿色；
}

标题

一,
一,
一,
一,
一,
一,
一,


一,
一,
一,
一,
一,
一,
一,
一,
一,
一,
一,
一,
一,
一,
一,
一,
一,
一,
一,
一,
一,

内容
请看一看。本教程介绍如何使用简单的脚本自定义滚动条。。看一看..我想使用原生滚动条。不管怎样，我正在读这篇文章，谢谢你的链接@deathangel908我认为JavaScript是实现这一点的必要条件，因为您要求底部div（绿色）具有动态高度。所以，根据div的内部内容，div的高度会有所不同，这只能通过JS实现。
<style>
.fluid-inline {
    display: inline-block;
    height: 100%;
    width: 100%;
}

.wrapper {
    /*I WANT TO REMOVE HARDCODED 83px SIZE */
    height: calc(100% - 83px); /*SUM nav + footer height.*/
    width: 100%;
}

.left {
    float: left;
}
.scrollable {
    background: yellow;
    height: 100%;
    min-width: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}
</style>

<nav></nav>
<div class="wrapper">
    <div class="fluid-inline">
        <div class="scrollable left"></div>
        <div class="scrollable"></div>
    </div>
    <div class="footer">
</div>