Почему для навигационной панели, закрепленной наверху (с position: fixed), требуется свойство width?

Question

Простая скрипка: https://jsfiddle.net/75zwpy3b/2/

Навигационная панель оформлена как

#navbar {
        background-color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        /* width: 100%; */
        position: fixed; 
      }

Как вы можете видеть, ширина не была применена, но позиция: фиксированная. применяется, панель навигации сжимается, чтобы соответствовать ее содержимому, но если я закомментирую position: fixed, то вдруг панель навигации переместится слева направо.

Почему position: fixed требует width: от 100% до go с ним?

Answer 1

Так как вы устанавливаете фиксированное положение, ему необходимы свойства высоты и ширины, поскольку нет других определенных элементов, от которых go не требуется. Если вы хотите, чтобы навигация масштабировалась по экрану, используйте ширину: 100%, но если вам нужен конкретный c фиксированный размер навигации, вы можете указать ширину: 800 пикселей.

Answer 2

Так как он исправлен, он не знает своих родительских элементов или братьев и сестер, поэтому он просто соответствует ширине своему содержимому. Одно из решений: go width: 100% или left: 0; справа: 0;