Flex Layout with fixed position (no scrolling) sidebar - html

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 layout left to right.
The sidebars contain menus and meta links.
My question is: when scrolling the content area, is it possible to leave the sidebars in fixed position, such that they stay in top position and do not scroll down?
JS Fiddle: http://jsfiddle.net/Windwalker/gfozfpa6/2/
HTML:
<div class="flexcontainer">
<div class="flexitem" id="canvas-left">
<p>This content should not scroll</p>
</div>
<div class="flexitem" id="content">
<div>
<p>Scrolling Content</p>
</div>
</div>
<div class="flexitem" id="canvas-right">
<p>This content should not scroll</p>
</div>
</div>
CSS:
.flexcontainer {
display: flex;
flex-direction: row;
min-height: 100%;
align-items: stretch;
}
.flexitem {
display: flex;
}
#canvas-left {
background: yellow;
order: -1;
flex: 0 0 57px;
}
#content {
background: green;
order: 1;
padding: 1rem;
}
#content div {
display: block;
}
#canvas-right{
background: blue;
order: 2;
flex: 0 0 57px;
}

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

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