我该如何定位：固定；框大小的元素的行为？

我有一个名为.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>

你不能

如CSS2.1规范所述：

绝对定位的盒子从正常流程中取出。

而且“柔性包装盒布局”规范确认：

flex容器 的绝对定位子元素不参与flex布局。但是，它确实参与了 重新排序步骤（请参阅order），这会对他们的绘画顺序产生影响。

^{（强调我的）}

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

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

这为您的伸缩盒空间提供了呼吸，这是伸缩盒的事情。如果您的伸缩方向是列，则可以top, left, bottom改用。

之所以起作用，是因为当您为元素提供固定位置以及aleft和right0或atop和bottom0时，该元素将被拉伸以填充从左到右或从上到下的空间。这样一来，Flexbox就可以在不固定位置的情况下使用您期望的空间量。

@Daniel，我知道这已经很晚了，但是...虽然接受的答案是正确的，但我认为这没有什么帮助。我有一个同样的问题（这是我遇到这篇文章的方式），我认为我将采用的解决方案是将位置固定元素包装在flex元素内。这是一个（非常丑陋的）例子

相关标记

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

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

您可以使用CSS替代方法来实现 position: sticky

它表现很好，但唯一的问题是浏览器支持（2018年6月）：https : //caniuse.com/#feat=css-sticky

希望它会很快好起来。

一个简单得多的解决办法是使用overflow-y:scroll和height: 100vh开启main-el容器。这将使side-el容器具有固定位置的外观，而无需诉诸位置：fixed。