0

I have a quite complicated page with flexbox.

In the page there is a left column and the content on the right.

The right side is also divided in a lot of columns.

Each column is a different div.

The number of columns in the right side could be very high, so, I need that the right side is entirely horizontally scrolled.

In the meantime, the data in each column could be very long, so I need that each column can be vertically scrolled.

The problem is that when I active these proprieties:

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

in my columns, the fixed width of columns is inhibited, and they are resized to fill the container, so i lose the horizontal scroll.

Here is my style, sorry if it isn't very kind..

    <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>

Can someone help me to improve my code?

Siyual
  • 16,415
  • 8
  • 44
  • 58
Perotz
  • 1
  • 1
  • This would be a lot easier to trouble shoot if you created a jsFiddle with an example of the problem. But at first glance, you shouldn't need `overflow-x:hidden;` on the columns as `overflow-y` should be sufficient. Instead, try adding `overflow-x:scroll;` to the `.Container` styles. – isick Dec 02 '15 at 15:43
  • Is it the same behavior on all browsers? Please include info about your testing in Chrome, FF, IE(10, 11) and Safari. Or you can tell us which browser to focus on. – Michael Benjamin Dec 02 '15 at 16:08
  • I'm writing a intranet web application, so I can say that my users will use only Chrome for this scope. [here](http://jsfiddle.net/perotti/15koe31v/2/) you can find the Fiddle of this terrible page. – Perotz Dec 03 '15 at 14:26
  • Take a look at this question http://stackoverflow.com/questions/21515042/scrolling-a-flexbox-with-overflowing-content – Renan Ferreira Dec 18 '15 at 19:59

0 Answers0