Css 我怎么能有一个职位：固定；flexbox大小的元件的行为？

我有一个名为.side el的div，我希望它的位置是：固定的；行为，但只要我应用了位置固定，宽度就会与正确的宽度交替。正确的宽度应为flexbox设置的宽度。我怎样才能达到这个目标

.container{
-webkit align内容：flex开始；
调整内容：灵活启动；
-webkit对齐项：flex开始；
调整项目：灵活启动；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
弯曲方向：行；
-webkit柔性包装：包装；
柔性包装：包装；
-webkit内容：flex start；
调整内容：灵活启动；
* {
框大小：边框框；
-webkit-flex-grow:1；
柔性生长：1；
-webkit flex收缩：0；
弹性收缩：0；
}
}
梅因酒店{
框大小：边框框；
填充：0.2em；
宽度：70%；
}
.赛德埃尔酒店{
框大小：边框框；
宽度：30%；
}

内容
内容

你不能

正如秘书长所解释的：

绝对定位的箱子从正常流量中取出

规范确认：

的绝对定位子对象不会 参与flex布局。但是，它确实参与了 （请参阅），这对他们的 绘画顺序

---

（强调我的）丹尼尔，我知道现在已经很晚了，但是。。。虽然被接受的答案是正确的，但我觉得它没有多大帮助。 我也有同样的问题（这就是我是如何看到这篇文章的），我认为我将采用的解决方案是在flex元素中包装position-fixed元素。 这是一个（非常难看的）

相关标记

  <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">&gt;</span>
        <span ng-hide="collapsed">&lt;</span>
      </button>
      <ul class="Layout-aside-content">
        <li ng-repeat="i in items">{{i}}</li>
      </ul>
    </div>
  </aside>

---

一个简单得多的解决方案是在

主el

容器上使用

overflow-y:scroll

和

height:100vh

。这将使

侧el

容器呈现固定位置的外观，而无需诉诸位置：固定

以下是一种受引导启发的方法：

.fixed-top {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

这给了你的flex-box喘息的空间，让你做flex-box的事情。如果您的弹性方向是column，则可以使用

top、left、bottom

---

这是因为当您为元素指定一个固定位置且

左

和

右

为0或

上

和

下

为0时，元素会从左到右或从上到下拉伸以填充空间。这反过来又允许flex box在不固定位置的情况下使用所需的空间量。

您可以使用css替代方案

position:sticky

它的表现很棒，但唯一的问题是浏览器支持（2018年6月）：

---

希望它能快点好起来。

我也遇到了同样的问题，实际上我刚刚找到了一种方法，在固定的位置上放置一个灵活的盒子，一个导航条的宽度，并将其居中

nav{
显示器：flex；
高度：50px；
宽度：90%；
左：5%；
位置：固定；
}

---

我希望能够有一个固定位置但居中的弹性盒导航条。所以我做的是做剩下的5%，因为这等于剩下的10%宽度的一半。试试看，可能会对你有帮助！：）

位置：粘性

但没有代码示例。 下面是一个极简主义的例子：

*{
框大小：边框框；
}
身体{
显示器：flex；
保证金：0；
}
导航{
宽度：20%；
高度：100vh；
顶部：0；/*这是“粘性”工作所必需的*/
位置：粘性；
背景：浅蓝色；
填充：1rem；
}
主要{
高度：3000px；/*原因滚动*/
背景：浅粉红色；
柔性生长：1；
填充：1rem；
}

这里是侧边栏
满足于此

你不能。绝对定位的元素从文档的正常流程中删除。好的，你能把它作为一个答案发布吗？在我的答案中添加了一个解释。希望这对你来说是有意义的。这个答案对我来说很有用，应该被认为是解决方案。这可以避免移动设备上滚动条的vh问题。有了这个css，工具栏就可以保持可见。FlexBox的干净解决方案很好。唯一的问题是，中心内容元素上的滚动条看起来非常糟糕，希望它像浏览器窗口一样放在一边。使用多级div的位置不好，这是为了保持我网站上的一切整洁！很好。我喜欢看到ECMA的进步。是的，这是一个伟大和明确的。对于持久的边栏和其他东西很好。谢谢！事实上，这是唯一对我有效的解决方案。使用

fixed

总是把

搞乱（在

下面）。

.fixed-top {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}