Почему не работает overflow: scroll с width:100%?

Question

[Fannasankh]

Есть блок, который должен быть растянут по размеру родителя и должен иметь скроллы (х и у).
Если я задаю, например, width:1200px, то все ок, скролл работает, если пишу width:100%, то блок растягивается по размеру содержимого и уходить за границы экрана.
Почему так?

const Root = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  background: #efcdb8;
  box-sizing: border-box;
`;

const Head = styled.div`
  width: 100%;
  height: 40px;
  background: #dabdab;
`;

const Body = styled.div`
  width: 1200px;
  height: 800px;
  overflow: scroll;
  background: #b8daab;
  display: flex;
  box-sizing: border-box;
`;

Head и Body выводятся внутри Root. В Body вложено много других элементов, которые должны скроллиться. Код, который написан выше, работает правильно, но размер Body не адаптируется к размеру Root.
Если в Body написать width: 100% и height: 100%, то блок растягивается по всему содержимому и появляются скроллы на странице, а не в блоке.

Comments

[Максим Иванов]

Можешь написать код хоть?

[Fannasankh]

Максим Иванов, отредактировал