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

Despite the above, I don't think so. Once you start adding `position` properties like absolute or fixed you're removing the block formatting context and so `flexbox` wouldn't apply any longer (AFAIK). *Maybe* something with `align-self` but without seeing any code or structure it's hard to comment. — Paulie_D, Jul 30 '15 at 11:53

score 22 · Accepted Answer · edited May 23 '17 at 12:02

22

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

edited May 23 '17 at 12:02

Community

1
1

answered Aug 01 '15 at 01:36

user3576508

613
1
4
12

Thanks a lot for this solution! :-) – Windwalker Aug 03 '15 at 09:23
1

The jsfiddle saved my day thanks so much! - still works June 2019 – Geoff Williams Jun 30 '19 at 13:36

score 4 · Answer 2 · answered Dec 21 '18 at 13:45

4

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/

answered Dec 21 '18 at 13:45

Istopopoki

1,584
1
13
20

score 0 · Answer 3 · answered Jul 30 '15 at 13:09

0

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

answered Jul 30 '15 at 13:09

jak89 _1

23
8

Sorry, I hit the enter key too early. Here my real thought on your proposal:Your approach shows why I initially chose a flex layout technique: the left column is a nav menu with icons, which can be collapsed and expanded, i.e. the width of left column changes and the content column should always align to the left canvas column, no matter of its actual width. – Windwalker Jul 30 '15 at 13:27
Of course, I could manage this by adding CSS classes like `menu-expanded` or `menu-collapsed` to swap the 20% offset to another value, but that's kind of hard coded..... :-/ – Windwalker Jul 30 '15 at 13:29
oh, then you are right... the left bar gets icons + expanding... so you need a drangable fixed 'left' bar? that could be dificult with an `position:absolute;` content div `max/min-width...`... – jak89 _1 Jul 30 '15 at 13:39

Flex Layout with fixed position (no scrolling) sidebar

3 Answers3

Linked