具有固定宽度和垂直溢出的div

Question

我有一个非常复杂的页面与flexbox。

在页面中有左栏和右侧的内容。

右侧也分为很多列。

每列都是不同的div。

右侧的列数可能非常高，因此，我需要右侧完全水平滚动。

与此同时，每列中的数据可能会很长，因此我需要每列都可以垂直滚动。

问题在于，当我积极参与这些礼仪时：

overflow-x: hidden;
overflow-y: scroll;

在我的专栏中，列的固定宽度被禁止，并且它们被调整大小以填充容器，因此我将丢失水平滚动。

这是我的风格，对不起，如果它不是那么友善..

    <style>

        * {
            box-sizing: border-box;
        }

        body {
            overflow-y: hidden;
            font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
        }

        html,
        body {
            padding: 0;
            margin: 0;
        }
        /*this is the top of page, that have no interaction with the bottom part*/
        .Top {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #04753d;
            position: relative;
            z-index: 10;
            height: 145px;
        }
        /*This is the container that contains all columns*/
        .Container {
            display: flex;
            overflow: hidden;
            height: 100vh;
            margin-top: -150px;
            padding-top: 150px;
            position: relative;
            width:100%;
            backface-visibility: hidden;
            will-change: overflow;
        }
        /*All the scrollable sections should overflow and be whatever height they need to be. As they are flex-items (due to being inside a flex container) they could be made to stretch full height at all times if needed.
        WebKit inertia scrolling is being added here for any present/future devices that are able to make use of it.
        */
        .vol57,.vol50,.vol64,.vol58,.vol51,.vol72,.vol59,.vol82,.vol92,.vol60,.vol91,.vol93,.vol61,.vol95,.vol75,.vol76,.vol77,.vol78,.vol79,.Left{
            width:350px;
            overflow-x: hidden;
            overflow-y: scroll;
        }
        /*  Left and Right are set sizes while the Middle is set to flex one so it occupies all remaining space. This could be set as a width too if prefereable, perhaps using calc.*/
        .Left {

            overflow-x: hidden;
            overflow-y: scroll;
            background-color: #e5e5e5;
            width:350px;
        }

        .Last {
            width: 350px;
            background-color: red;
        }
    </style>

有人可以帮助我改进我的代码吗？