Answer the question
In order to leave comments, you need to log in
V
V
Vadim Rublev2021-06-30 00:28:20
Vadim Rublev, 2021-06-30 00:28:20
Why do flex items in a container stretch vertically below the container's border?
For some reason, the flex items in the container-body vertically stretch below the container's border. The bottom of the block element and content is not visible.
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;
}Why is this so, and how to make the blocks stretch normally in height?
Thank you!
Similar questions
B
F
S
M
E
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question