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

css flexbox
Daniel Schmidt picture Daniel Schmidt · Mar 13, 2015 · Viewed 85.3k times · Source

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?

Answer

Wylliam Judd picture Wylliam Judd · Aug 28, 2017

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.

Related questions

Better way to set distance between flexbox items

To set the minimal distance between flexbox items I'm using margin: 0 5px on .item and margin: 0 -5px on container. For me it seems like a hack, but I can't find any better way to do this. Example

Read More
Flexbox: center horizontally and vertically

How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally. http://codepen.io/anon/pen/zLxBo

Read More
How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More