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

Question

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>

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

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

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

Sign up