Почему мой контент вне закручиваемой области, когда размер окна уменьшается? ⇐ Html

[Anonymous]

В моем макете страницы с фиксированной областью заголовка и основным содержанием (разделение между боковой панелью и основной областью содержания) все выстроится в очередь, и если я добавлю фиктивное содержание, чтобы заставить прокрутку, то мой заголовок остается наверху. Содержание будет ограничено 80% или мин шириной 800PX, центрированной в окне, если оно будет больше. Область вне экрана слева. Если ужесточить даже часть основной области, которая прокручивается, скрыта слева. Как заставить контент оставаться на экране? class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">

Код: Выделить всё

body {
padding: 0;
margin: 0;
font-family: sans-serif;
display: flex;
flex-direction: column;
}

#wrapHead {
width: 100%;
position: fixed;
display: flex;
justify-content: center;
height: 80px;
margin: 0;
top: 0px;
background-color: #333399;
color: #ffffff;
}
.header {
display: flex;
width: 80%;
min-width: 800px;
}

#wrapMain {
width: 100%;
/* position: fixed; */
display: flex;
justify-content: center;
height: 100%;
margin: 0;
margin-top: 80px;
}
.main {
display: flex;
width: 80%;
min-width: 800px;
}

.sideCol {
width: 150px;
min-width: 150px;
background-color: #6666cc;
}

.mainCol {
width: 100%;
min-width: 650px;
background-color: #9999ee;
}< /code>




[LOGO]

header/title  -->  [user/login]







side nav

main content

Подробнее здесь: https://stackoverflow.com/questions/794 ... ts-reduced