Почему-то flex-элементы в контейнере-body вертикально тянутся ниже границы контейнера. Низ элемента-блока и контента не видно.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Flex...</title>
<link rel="stylesheet" type="text/css" href="normalize.css" />
<link rel="stylesheet" type="text/css" href="new_styleFlx.css" />
</head>
<body>
<header>
Это шапка...
</header>
<!-- Панель-столбец слева. -->
<div class="divMenu">
<a href="About.htm">
<img border="0" src="images/r_about_site.gif" alt="О сайте" />
</a>
<br>
<a href="FAQ/0.htm">
<img border="0" src="images/r_faq.gif" alt="Часто задавамые вопросы" />
</a>
<br>
<a href="martirol/1.htm">
<img border="0" src="images/r_martirolog.gif" alt="Содержание" />
</a>
<p>П1. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента.</p>
<p>П2. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента.</p>
<p>П3. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента.</p>
<p>П4. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента.</p>
<p>П5конец. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. Здесь еще контент. Много контента. конец</p>
</div>
<!-- Блок контента. -->
<div class="divContent">
<h1>Заголовок</h1>
<p>П1. Тут много текста.</p>
<p>П2. Тут много текста.</p>
<p>П3. Тут много текста.</p>
<p>П4. Тут много текста.</p>
<p>П5. Тут много текста.</p>
<p>П6. Тут много текста.</p>
<p>П7. Тут много текста.</p>
<p>П8конец. _Это последний абзац... конец</p>
</div>
</body>
</html>
CSS:
body {
display: flex;
flex-flow: row wrap;
overflow: hidden;
}
body > * {
flex: 1 100%;
border: 1px solid #000000;
}
header {
background-color: tomato;
flex-basis: 100%;
min-height: 32px;
height: calc( (100vw - 480px)/(1580 - 580) * (120 - 10) + 10px);
max-height: 60px;
}
div {
flex: 2 0%;
align-items: stretch;
height: 100vh;
overflow: auto;
}
.divMenu {
background-color: #89E209;
flex: 0 20%;
}
.divContent {
background-color: silver;
}
Почему так, и как сделать чтобы блоки нормально растянулись в высоту?
Спасибо!
Простой
Средний
