Блок по фактиеской ширине контейнера во FLEX
 

Пример: https://stackblitz.com/edit/typescript-zxu2kk

Как сделать, чтобы блок content был бы равен фактической ширине блока header, а не ширине окна?

В стилях у содержимого (селектор .content) и заголовка (селектор .header) уберите объявление ширины элементов. Также, возможно, вы захотите добавить объявление контейнеру (селектор .container, объявление width: min-content;), отвечающее за то, чтобы его ширина была не больше самого широкого элемента!

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  width: min-content;
}

.header {
  border: solid 1px red;
}

.content {
  border: solid 1px green;
}