如何用flex布局实现左右元素独立滚动（模仿某外卖软件点餐界面）

红色顶部和绿色底部固定高度，中间自适应高度，中间左右两列超过高度都可以滚动。以下是代码：

html部分：

css部分:

效果图:

解决方法：我们要让需要滚动的部分包裹一层div，再使里面的子元素flex比例为1。

原理：flex给元素分配的比例是相对于窗口，元素大小超过了分配给它的比例，就会出现滚动条。