Есть блок, который должен быть растянут по размеру родителя и должен иметь скроллы (х и у).
Если я задаю, например, 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%, то блок растягивается по всему содержимому и появляются скроллы на странице, а не в блоке.
Средний
