html - 使用 flexbox 固定左侧栏

Question

我正在尝试使用 flexbox 制作左侧边栏。

我希望侧边栏保持固定，并在需要时拥有自己的滚动条。如果内容很长并且主要内容上有滚动条，我不希望侧边栏随着我向下滚动而移动。

下面是一个实现的例子: http://codepen.io/tedartus/pen/KmGYNm

问题是向下滚动时侧边栏也在移动。

我读到一篇关于“用 flexbox 固定侧边栏的位置”的帖子。我尝试了使容器与屏幕一样高并且只向主要内容添加滚动的解决方案。

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

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

它可以工作，但我再也看不到右侧的滚动条了。知道为什么吗？

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

我想先解决这个问题，然后再移动到侧边栏的滚动条。

谢谢

Answer 1

按如下方式更改您的 .sidebar CSS:

.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%;

这是代码笔:http://codepen.io/bhuwanb9/pen/qmgbNV