html - 为什么带有 "display: flex"和 "position: fixed"的 div 没有占据全部可用宽度？

Question

我注意到当 div有position: fixed和display: flex ，它不像正常的 div 那样占据全部可用宽度。是的。

.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>

如何更改我的 CSS，以便第二个容器像第一个容器一样占据完整的可用宽度？

Answer 1

为什么？已由 Michael_B 回答

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

您还可以做的是根据左坐标和右坐标调整固定元素的大小，而不是width:100%; 这通常会带来麻烦，而不是有帮助。

如果它是 body 的直接子级，它也可以继承 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>