У меня есть скелет простого приложения, содержащего верхний заголовок, область содержимого и контейнеры страниц:
.container {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
background-color: red;
}
.appheader {
width: 100%;
background-color: #cdcdcd;
color: blue;
text-align: center;
}
.appcontent {
width: 100%;
height: 100%;
background-color: blue;
}
.appcontentheader {
width: 100%;
background-color: black;
color: white;
text-align: center;
padding: 10px;
}
.page {
display: flex;
flex-direction: column;
background-color: yellow;
margin: 0px 50px 0px 50px;
width: 100%;
height: 100%;
}
.pagetitle {
background-color: grey;
color: orange;
text-align: center;
}
.pagecontent {
padding: 20px;
background-color: grey;
color: orange;
}
<div class="container">
<div class="appheader">
<h2>
MY APPLICATION MENU</h2>
</div>
<div class="appcontent">
<div class="appcontentheader">
<h4>
Section Title
</h4>
</div>
<div class="page">
<div class="pagetitle">
<h1>
PAGE TITLE
</h1>
</div>
<div class="pagecontent">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
Я ожидал, что весь контент поместится на одной странице, без прокрутки по горизонтали или вертикали.
Что касается примера, оба моиappcontent и page переполняют оси x и y (желтые и черные области переполняются).
Видны проблемы с шириной моего каскада: 100% и высотой: определения 100%.
Почему это происходит и как правильно это исправить (сохранить весь контент в представлении без прокрутки, без использования scroll-x/y: hidden?