具有固定位置(无滚动)侧边栏的Flex布局

Question

我有一个左右侧边栏的布局，将主内容区围在中间。

侧边栏和主要内容是伸缩项，从左到右的伸缩布局。

侧边栏包含菜单和元链接。

我的问题是:当滚动内容区域时，是否有可能将侧边栏留在固定位置，使它们保持在顶部位置而不向下滚动?

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

Answer 1

请看看类似的问题，并提供解决方案:如何模拟'position:fixed'Flexbox-aligned侧边栏

根据你的代码，你也可以用"position: fixed"包装器包装你的内部内容:

<div class="flexitem" id="canvas-left">
    <div class="fixed">
        <p>This content should not scroll</p>
    </div>
</div>

并在CSS中添加适当的样式:

.fixed {
    position: fixed;
    width: 57px; /* according to #canvas-left */
}

下面是一个固定左边栏的代码示例:http://jsfiddle.net/8hm3849m/。注意，这个技巧不会为侧边栏提供适当的灵活网格，包装器的宽度应该是固定的(或通过JavaScript动态设置)。

Answer 2

这个问题很老了，但是我用

解决了一个类似的问题

position: sticky;
top: 0;

表示左项和右项。我还去掉了

display: flex 

css的伸缩项，我认为没有必要。

https://jsfiddle.net/8mpxev0u/

Answer 3

我不知道如何使用flex，但这里有一个更容易/替代的CSS删除所有的flex…并且尽量不要在外部div中添加填充，在内部项目中更容易，然后你不需要计算是否有太多div

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