Question

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

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

以下是一个实施示例： http://codepen.io/tedartus/pen/KmGYNm

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

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

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

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

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

=＆GT; 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%;

}

以下是codepen：http://codepen.io/bhuwanb9/pen/qmgbNV

Answer 2

如果它仅与滚动条有关，则需要根据转换值减小内容的宽度，以使其在屏幕上保持可见。它在那里，但右边的屏幕是220px;）：

.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 （你也可以从@coderall添加关于侧栏溢出的css）

使用flexbox修复左侧栏

2 个答案: