Элемент фиксированной позиции шириной 100% выходит за пределы родительского контейнера

Question

Я хочу, чтобы display: flex с position: fixed имели ширину того же размера, что и его родитель. Тем не менее, с моим кодом ниже, чем родительский контейнер.

Вот что я уже пробовал. Пожалуйста, проверьте скрипку ниже

.container {
  width: 400px;
  padding: 5px;
  background-color: red;
}

.flex {
  display: flex;
  position: fixed;
  height: 100px;
  width: 100%;
  background: pink;
}

<div class="container">
  <div class="flex">
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
  </div>
</div>

Я хочу, чтобы контейнер .flex имел ту же ширину, что и его родительский .container, когда я установил его на width: 100% с position: fixed.

Answer 1

В дополнение к position:sticky вы можете рассмотреть inherit, если у родителя всегда будет ширина, определяемая как длина, а не процент:

.container {
  width: 400px;
  padding: 5px;
  background-color: red;
}

.flex {
  display: flex;
  position: fixed;
  height: 100px;
  width: inherit;
  background: pink;
}

<div class="container">
  <div class="flex">
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
  </div>
</div>

Answer 2

Используйте position:sticky вместо

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.container {
  width: 400px;
  height: 200vh;
  padding: 0 5px;
  background: linear-gradient(red, blue);
}

.flex {
  display: flex;
  position: sticky;
  top: 0;
  height: 100px;
  background: pink;
}

<div class="container">
  <div class="flex">
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
  </div>
</div>