css – 我怎么能有一个职位：固定; flexbox大小元素的行为？

我有一个名为.side-el的div,我想在一个位置：固定;行为,但一旦我应用位置固定宽度从正确的一个替换.正确的宽度将是由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>