Не совсем понимаю поведение height:100% для дочерних div-ов. Есть вот такой простой пример кода:
html, body
{margin:0;padding:0;}
.main-wrapper {
height: 100vh;
}
.section {
background: grey;
height: 100%;
display: flex;
flex-direction: column;
}
.stretch {
background: #f9f9f9;
height: 100%;
margin: 5px;
}
.fixed
{
background: #f9f9f9;
margin: 5px;
}
.scroll
{
max-height:100%;
overflow:auto;
}
<div class="main-wrapper">
<div class="section">
<div class="fixed"><h4>Div#1</h4></div>
<!--<div class="section div2And3Parent">-->
<div class="fixed"><h4>Div#2</h4></div>
<div class="stretch scroll">
<h4>Div#3_1</h4>
<h4>Div#3_2</h4>
<h4>Div#3_3</h4>
<h4>Div#3_4</h4>
<h4>Div#3_5</h4>
<h4>Div#3_6</h4>
<h4>Div#3_7</h4>
<h4>Div#3_8</h4>
<h4>Div#3_9</h4>
<h4>Div#3_10</h4>
<h4>Div#3_11</h4>
<h4>Div#3_12</h4>
</div>
<!--</div>-->
</div>
</div>
Здесь имеются 3 div-а: div №1 и №2 имеют фиксированную высоту и div №3 должен растягиваться по высоте, при этом если содержимое не вмещается по высоте, то должен появляться scroll. Все работает, все отлично.
А теперь немного другой кусок кода, просто раскоментировал <div class="section div2And3Parent">
, здесь добавляется родительский элемент для div №2 и div №3:
html, body
{margin:0;padding:0;}
.main-wrapper {
height: 100vh;
}
.section {
background: grey;
height: 100%;
display: flex;
flex-direction: column;
}
.stretch {
background: #f9f9f9;
height: 100%;
margin: 5px;
}
.fixed
{
background: #f9f9f9;
margin: 5px;
}
.scroll
{
max-height:100%;
overflow:auto;
}
<div class="main-wrapper">
<div class="section">
<div class="fixed"><h4>Div#1</h4></div>
<div class="section div2And3Parent">
<div class="fixed"><h4>Div#2</h4></div>
<div class="stretch scroll">
<h4>Div#3_1</h4>
<h4>Div#3_2</h4>
<h4>Div#3_3</h4>
<h4>Div#3_4</h4>
<h4>Div#3_5</h4>
<h4>Div#3_6</h4>
<h4>Div#3_7</h4>
<h4>Div#3_8</h4>
<h4>Div#3_9</h4>
<h4>Div#3_10</h4>
<h4>Div#3_11</h4>
<h4>Div#3_12</h4>
</div>
</div>
</div>
</div>
И тут я не могу понять почему вместо одного scroll-а их начинает появляться 2, а мне нужно чтобы поведение было идентичным как в первом случае, без этого внешнего scroll-а. Скролл для внешнего main-wrapper я так понимаю появляется из-за того, что высота div3 начинает рассчитываться как (высота main_wrapper - высота div2)
а не (высота main_wrapper - высота div2 - высота div1)
.
И в результате этого полная высота main_wrapper == ((высота main_wrapper - высота div2) + высота div2 + высота div1) == (высота main_wrapper + высота div1)
. Из-за этого начинает отображаться лишний вертикальный скролл из-за избыточной высоты у элемента main_wrapper.
Если кто подскажет из-за чего такое происходит, буду признателен и заранее спасибо.
P.S. Ниже мне помогли советом применить к main_wrapper свойство overflow:hidden но оно проблем неправильного расчета высоты main_wrapper не решило, а просто скрывает скролл.