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

The question is old, but I solved a similar issue using

position: sticky;
top: 0;

for the left and right items. Also I removed the

display: flex 

css for the flex items, I don't think that's necessary.

https://jsfiddle.net/8mpxev0u/

Answer 2

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:

<div class="flexitem" id="canvas-left">
    <div class="fixed">
        <p>This content should not scroll</p>
    </div>
</div>

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

Answer 3

i dont know how do it with flex, but here is a easyer/alternate css remove all that flex... and try to never add padding to a outer div, its easyer in inner items, then you dont need to calculate if there are to many divs

.flexcontainer {
    display: block;
    min-height: 100%;
    align-items: stretch;
}
.flexitem {
    display: flex;
}
#canvas-left {
    background: yellow;
    order: -1;
    left: 0px;
    width: 20%;
    position: fixed;
}
#content {
    position: absolute;
    background: green;
    order: 1;
    width: 60%;
    left: 20%;
}
#content p {
    display: block;
    padding: 1rem;
}
#canvas-right{
    background: blue;
    order: 2;
    right: 0px;
    width: 20%;
    position: fixed;
}