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

Question

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

Answer 1

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

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

这给您的伸缩盒空间提供了呼吸，这是伸缩盒的工作。如果弹性方向是列，则可以top, left, bottom改用。

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