CSS 我怎样才能有一个位置：固定；弹性盒大小元素的行为？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29036231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I have a position: fixed; behaviour for a flexbox sized element?
提问by Daniel Schmidt
I have a div called .side-el which I would like to have in a position: fixed; behavior, but as soon as I apply position fixed the width alternates from the right one. The right width would be the one set by flexbox. How can I achieve this goal?
我有一个名为 .side-el 的 div，我希望将其置于一个位置：fixed; 行为，但是一旦我应用位置固定，宽度就会从右侧交替变化。正确的宽度将是由 flexbox 设置的宽度。我怎样才能实现这个目标？
.container {
-webkit-align-content: flex-start;
align-content: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
* {
box-sizing: border-box;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
}
.main-el {
box-sizing: border-box;
padding:0 2em;
width: 70%;
}
.side-el {
box-sizing: border-box;
width: 30%;
}<div class="container" style="background-color: blue; height: 100px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>采纳答案by Oriol
You can't.
你不能。
As explained by the CSS2.1 spec:
正如CSS2.1 规范所解释的：
Absolutely positioned boxes are taken out of the normal flow.
绝对定位的盒子脱离了正常的流程。
And the Flexible Box Layoutspec confirms that:
而灵活的盒子布局规范确认：
An absolutely-positioned child of a flex containerdoes not participate in flex layout. However, it does participate in the reordering step(see order), which has an effect in their painting order.
flex 容器的绝对定位子节点不参与 flex layout。但是，它确实参与了 重新排序步骤（请参阅order），这对其绘制顺序有影响。
(Emphasis mine)
（强调我的）
回答by Wylliam Judd
Here's a way to do this inspired by bootstrap:
这是一种受引导程序启发的方法：
.fixed-top {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
}
This gives your flex-box room to breathe and do it's flex-box thing. If your flex-direction is column, you could use top, left, bottominstead.
这给了你的 flex-box 空间来呼吸并做它的 flex-box 事情。如果您的 flex-direction 是 column，则可以top, left, bottom改用。
This works because when you give an element a fixed position and a leftand rightof 0 or a topand bottomof 0, the element is stretched to fill the space from left to right, or top to bottom. That in turn allows a flex-box to use the amount of space you would expect without position fixed.
这是有效的，因为当你给一个元素一个固定的位置和 a leftand rightof 0 或 a topand bottomof 0 时，元素被拉伸以从左到右或从上到下填充空间。这反过来又允许 flex-box 在不固定位置的情况下使用您期望的空间量。
回答by o4ohel
@Daniel , I know this is very late but ... while the accepted answer is correct, I don't feel it's very helpful. I had the same question (which is how I came across this post), and the solution I think I'll go with is to wrap the position fixed element within the flex element. Here's a (very ugly) example
@Daniel ，我知道这已经很晚了，但是......虽然接受的答案是正确的，但我觉得这不是很有帮助。我有同样的问题（这就是我遇到这篇文章的方式），我认为我会采用的解决方案是将位置固定元素包装在 flex 元素中。这是一个（非常丑陋的）例子
Relevant Markup
相关标记
<aside class="Layout-aside" ng-class="{'isCollapsed': collapsed}" ng-controller="AsideCtrl">
<div class="Layout-aside-inner">
<button ng-click="collapsed = !collapsed">
<span ng-show="collapsed">></span>
<span ng-hide="collapsed"><</span>
</button>
<ul class="Layout-aside-content">
<li ng-repeat="i in items">{{i}}</li>
</ul>
</div>
</aside>
Relevant CSS
相关CSS
.Layout-aside {
order: 0;
min-width: 140px;
width: 140px;
background-color: rgba(0, 255, 0, .4);
transition: width .4s, min-width .4s;
}
.Layout-aside.isCollapsed {
min-width: 25px;
width: 25px;
}
.Layout-aside-inner {
position: fixed;
}
.Layout-aside.isCollapsed .Layout-aside-inner {
width: 25px;
}
.Layout-aside.isCollapsed .Layout-aside-content {
opacity: 0;
}
回答by Juozas Rastenis
You can achieve it with a css alternative position: sticky
您可以使用 css 替代方案来实现它 position: sticky
It acts great but the only problem is browser support (June 2018): https://caniuse.com/#feat=css-sticky
效果很好，但唯一的问题是浏览器支持（2018 年 6 月）：https: //caniuse.com/#feat=css-sticky
Hope it gets better soon.
希望快点好起来。
回答by Greg Beaver
A far simpler solution would be to use overflow-y:scrolland height: 100vhon the main-elcontainer. This will give the appearance of fixed position to the side-elcontainer without resorting to position: fixed.
一个更简单的解决方案是在容器上使用overflow-y:scroll和。这将为容器提供固定位置的外观，而无需求助于位置：固定。height: 100vhmain-elside-el
