使用 flexbox 修复左侧栏答案

【问题标题】：fixed left side bar using flexbox使用 flexbox 修复左侧栏
【发布时间】：2017-05-23 17:36:13
【问题描述】：

我正在尝试使用 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

我想在移动到侧边栏的滚动条之前先解决这个问题。

谢谢

【问题讨论】：

一旦将position: absolute 或position: fixed（position: absolute 的一种形式）添加到弹性项目，它就不再参与弹性布局。您基本上删除了它接受 flex 属性的能力。 w3.org/TR/css-flexbox-1/#abspos-items
这里是关于绝对定位网格项目的解释，其行为类似于弹性项目：stackoverflow.com/q/43999732/3597276

标签： html css flexbox

【解决方案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

【讨论】：

太好了，谢谢，它适用于侧边栏上的滚动条。知道如何在内容上获得滚动条吗？
@Ted - 检查更新的 codepen。 css的一些变化（没有flexbox）
@Ted - 我做了一些研究，发现如果您使用的是position: absolute，那么使用flexbox 属性是没有意义的。
谢谢。您删除了.wrapper 中的display: flex; 对吗？
嗯，我的 css 中必须少一些东西，因为当我从 .wrapper 中删除 display: flex; 时，它不再起作用：侧边栏随着内容移动：codepen.io/tedartus/pen/Pmygpq

【解决方案2】：

如果它只是关于滚动条，您需要根据翻译值减小内容的宽度，以便它在屏幕上保持可见。它在那里，但右侧屏幕外 220 像素；）：

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

【讨论】：