Как я могу установить позицию: исправлено; поведение для элемента размера flexbox?

У меня есть div, называемый .side-el, который я хотел бы иметь в позиции: 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>

Ответы

Ответ 1

Вы не можете.

Как объясняется спецификация CSS2.1:

Абсолютно установленные поля выведены из нормального потока.

И Flexible Box Layout показывает, что:

Абсолютно-расположенный дочерний элемент контейнера flex не участвовать в гибком макете. Однако он участвует в шаг переупорядочения (см. order), что оказывает влияние на их порядок окраски.

^{(Акцент мой)}

Ответ 2

@Даниэль, я знаю, что это очень поздно, но... пока принятый ответ верен, я не чувствую его очень полезным. У меня был тот же вопрос (как я столкнулся с этим сообщением), и решение, о котором я думаю, я продолжу, - это обернуть фиксированный элемент позиции в элементе 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;
}

Ответ 3

Вот способ сделать это, вдохновленный бутстрапом:

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

Это дает вашей комнате с гибкой коробкой дышать и делать это с гибкой коробкой. Если ваше направление flex - столбец, вы можете использовать top, left, bottom вместо этого.

Это работает, потому что когда вы даете элементу фиксированное положение и left и right из 0 или top и bottom из 0, элемент растягивается, чтобы заполнить пробел слева направо, или сверху вниз. Это, в свою очередь, позволяет гибкой коробке использовать количество пространства, которое вы ожидаете, без фиксированного положения.

Ответ 4

Вы можете достичь этого с помощью альтернативной position: sticky css position: sticky

Он отлично работает, но единственной проблемой является поддержка браузера (июнь 2018 года): https://caniuse.com/#feat=css-sticky

Надеюсь, скоро станет лучше.

Ответ 5

Более простым решением было бы использовать overflow-y:scroll и height: 100vh в контейнере main-el. Это приведет к появлению фиксированного положения в контейнере side-el, не прибегая к положению: фиксированное.

Ответ 6

Я знаю, что это 4-летний пост, но я пытался сделать то же самое сам и продолжаю получать направление на этот пост.

Для всех, кто пытается найти решение этой проблемы, можно получить эффект как "display: flex", так и "position: fixed", и пример приведен в фрагменте кода ниже.

Обратите внимание, что и классы leftDiv и rightDiv учитывают коэффициенты изменения размера flex, но класс rightDivFixed останется в фиксированном положении при прокрутке, что обеспечит преимущества как flex, так и fixed.

body {
  margin: 0;
}

p {
  height: 100px;
}

.flexClass{
  display: flex;
  height: 100%;
  min-height: 100vh;
}

.leftDiv {
  flex: 2;
  min-height: 100%;
  background: green;
}

.rightDiv {
  flex: 1;
}

.rightDivFixed {
  position: fixed;
  height: 100vh;
  width: 100%;
  background: orange;  
}

<body>
  <div class='flexClass'>
    <div class='leftDiv'>
      <p style="background: blue">LEFT 1</p>
      <p style="background: red">LEFT 2</p>
      <p style="background: blue">LEFT 3</p>
      <p style="background: red">LEFT 4</p>
      <p style="background: blue">LEFT 5</p>
      <p style="background: red">LEFT 6</p>
      <p style="background: blue">LEFT 7</p>
      <p style="background: red">LEFT 8</p>
      <p style="background: blue">LEFT 9</p>
      <p style="background: red">LEFT 10</p>
      <p style="background: blue">LEFT 11</p>
      <p style="background: red">LEFT 12</p>
      <p style="background: blue">LEFT 13</p>
      <p style="background: red">LEFT 14</p>
      <p style="background: blue">LEFT 15</p>
      <p style="background: red">LEFT 16</p>
      <p style="background: blue">LEFT 17</p>
      <p style="background: red">LEFT 18</p>
      <p style="background: blue">LEFT 19</p>
      <p style="background: red">LEFT 20</p>      
    </div>
    <div class='rightDiv'>
      <div class= 'rightDivFixed'>
        RIGHT
      </div>
    </div>
  </div>
</body>