Flex / Div: Некоторое содержание выталкивается из прокручиваемой области при уменьшении размера окна? ⇐ Html

[Anonymous]

Я работаю над макетом страницы с фиксированной областью заголовка, и основным контентом под ним разделен между области боковой панели/навигации и основной областью содержания. Пока все хорошо, и все выстроится в очередь ... если я добавляю фиктивное содержание, чтобы заставить прокрутку, то мой заголовок остается наверху. быть ограниченным до 80% или мин шириной 800px ish, хорошо центрирована в окне, если оно больше ... < /p>
Моя проблема заключается в том, что по какой -то причине, когда размер окна уменьшается ниже 800px ширину Несмотря на то, что появляется полоса прокрутки, область логотипа / боковой панели срывается от экрана влево, сначала то, что вы можете увидеть с помощью полосы прокрутки ... на самом деле, если достаточно ужесточить даже часть основной области, которая < / em> Прокрутите, скрыт слева. : < /p>

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

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 ... ze-reduced