How can I have a position: fixed; behaviour for a flexbox sized element?

Question

I have a div called .side-el which I would like to have in a position: fixed; behavior, but as soon as I apply position fixed the width alternates from the right one. The right width would be the one set by flexbox. How can I achieve this goal?

.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

Here's a way to do this inspired by bootstrap:

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

This gives your flex-box room to breathe and do it's flex-box thing. If your flex-direction is column, you could use top, left, bottom instead.

This works because when you give an element a fixed position and a left and right of 0 or a top and bottom of 0, the element is stretched to fill the space from left to right, or top to bottom. That in turn allows a flex-box to use the amount of space you would expect without position fixed.

Answer 2

You can't.

As explained by the CSS2.1 spec:

Absolutely positioned boxes are taken out of the normal flow.

And the Flexible Box Layout spec confirms that:

An absolutely-positioned child of a flex container does not participate in flex layout. However, it does participate in the reordering step (see order), which has an effect in their painting order.

^{(Emphasis mine)}