Flex Layout with fixed position (no scrolling) sidebar

Question

I have a layout with left and right canvas sidebars, enclosing the Main content area in the middle.

The sidebars and main content are flex items, positioned in a flex la

Answer 1

Please look at the similar question with provided solution: How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar.

According to your code you can also wrap your inner content in "position: fixed" wrapper:

    

        
This content should not scroll
    

And add proper styling in CSS:

.fixed {
    position: fixed;
    width: 57px; /* according to #canvas-left */
}

Here is an example of your code with fixed left sidebar: http://jsfiddle.net/8hm3849m/. Note that this trick won't provide you proper flexible grid for sidebars, width of the wrapper should be fixed (or set dynamically via JavaScript).