positionn：fixedを指定するとheaderの幅が縮む理由が知りたいです

Question

html

  <header>
    <div class="">bbb</div>
    <nav>
      <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
      </ul>
    </nav>
 </header>

css

header {
  display: flex;
  justify-content: space-between;
  background: red;
  position: fixed;
  height: 200px
}

right: 0;
left: 0;
を指定すると画面幅いっぱいまで伸びたのですが、それを指定しないで position: fixed;を指定すると幅が縮んでしまう理由を知りたいです。

Answer 1

そういう仕様だと思います。

【position - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/position

ほとんどの時、絶対位置指定要素に height および width が auto が設定されると、内容に合うように大きさが調整されます。