Misha Moroshko Misha Moroshko - 3 years ago 238
CSS Question

Why does div with "display: flex" and "position: fixed" doesn't occupy the full available width?

I noticed that when

div
has
position: fixed
and
display: flex
, it doesn't occupy the full available width like normal
div
s do.



.container {
display: flex;
background-color: #ddd;
margin-top: 50px;
}

.fixed {
position: fixed;
}

.content {
background-color: #bbb;
flex-grow: 1;
}

<div class="container">
<div>Title</div>
<div class="content">Content</div>
</div>

<div class="container fixed">
<div>Title</div>
<div class="content">Content</div>
</div>





enter image description here

How could I change my CSS so that the second container occupy the full available width like that first one does?

Answer Source

Why? is already answered by Michael_B

... it is out-of-flow ...

What you can also do is to size the fixed element from left and right coordonates instead width:100%; that is more often a trouble maker than helpfull.

If it is a direct-child of body, it can also inherits margins .

.container {
  display: flex;
  background-color: #ddd;
  margin-top: 50px;
}

.fixed {
  position: fixed;
  left:0;
  right:0;
  margin-left:inherit;
  margin-right:inherit;
}

.content {
  background-color: #bbb;
  flex-grow: 1;
}
<div class="container">
  <div>Title</div>
  <div class="content">Content</div>
</div>

<div class="container fixed">
  <div>Title</div>
  <div class="content">Content</div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download