fixed left side bar using flexbox

Question

I am trying to have a left sidebar using flexbox.

I'd like the sidebar to stay fixed and have its own scroll bar if needed. If the content is long and there is a scroll bar on the main content, I don't want the sidebar to move as I scroll down.

Here is an example of implementation: http://codepen.io/tedartus/pen/KmGYNm

The problem is that the sidebar is also moving when scrolling down.

I read a thread about "position fixed the sidebar with flexbox". I tried the solution of making the container as tall as the screen and only adding scrolling to the main content.

.wrapper {
  display: flex;
  height: 100vh;
}

.content {
  flex: 1 1 auto;
  overflow: auto;
}

It works but I don't see the scrollbar on the right anymore. Any idea why?

=> http://codepen.io/tedartus/pen/Pmygpq

I wanted to fix this first before moving to the sidebar's scrollbar.

Thanks

Once you add `position: absolute` or `position: fixed` (a form of `position: absolute`) to a flex item, it no longer participates in flex layout. You essentially remove its ability to accept flex properties. https://www.w3.org/TR/css-flexbox-1/#abspos-items — Michael Benjamin, May 23 '17 at 17:42
Here's an explanation regarding absolutely-positioned grid items, which behave similarly to flex items: https://stackoverflow.com/q/43999732/3597276 — Michael Benjamin, May 23 '17 at 17:45

Bhuwan · Accepted Answer · 2020-01-21T04:48:34.727

1

Do changes on your .sidebar css as follow:

.sidebar {
    position: absolute;
    width: 220px;
    top: 0;
    bottom: 0;
    overflow: auto;
}
.content {
    overflow: auto;
    padding: 30px;
    background: #eeeeee;
    box-shadow: 0 0 5px black;
    transform: translate3d(0, 0, 0);
    transition: transform .3s;
    height: 100%;

}

Here is the codepen: http://codepen.io/bhuwanb9/pen/qmgbNV

edited Jan 21 '20 at 04:48

answered May 23 '17 at 18:05

Bhuwan

16,525
5
34
57

Great, thanks, that works for the scrollbar on the sidebar. Any idea how to get a scrollbar on the content? – Ted May 23 '17 at 18:11
@Ted - Check the updated codepen. Some changes in css(without flexbox) – Bhuwan May 23 '17 at 19:06
@Ted - I did some research and found that if your are using `position: absolute` then there is no point to use the `flexbox` property. – Bhuwan May 23 '17 at 19:13
Ha thanks. You removed `display: flex;` in the `.wrapper` correct? – Ted May 24 '17 at 00:59
Hum, I must have something less in my css because when I remove `display: flex;` from `.wrapper`, it does not work anymore: the sidebar moves with the content: http://codepen.io/tedartus/pen/Pmygpq – Ted May 24 '17 at 15:35
I think you haven't checked the updated [codepen](http://codepen.io/bhuwanb9/pen/qmgbNV), Its working fine. Set `.content` class css `height:100%`. – Bhuwan May 24 '17 at 15:43
Hum, I think I got it right this time. I started from your codepen again and changed it to keep the header of the sidebar fixed as well: http://codepen.io/tedartus/pen/ybZWZj – Ted May 24 '17 at 15:52

score 0 · Answer 2 · answered May 23 '17 at 18:15

if it is only about the scrollbar, you need to reduce width of content according to translate values so it remains visible at screen. it is there , but 220px off screen on the right ;):

.content.isOpen {
  transform: translate3d(220px,0,0);
  max-width:calc(100% - 220px);/* 220px being width of sidebar/tanslate value */
}

http://codepen.io/anon/pen/WjPrXv (you can also add css from @coderall about side bar overflowing)

fixed left side bar using flexbox

2 Answers2