Некорректно работает свойство height:100% для дочерних элементов

Question

Не совсем понимаю поведение 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 не решило, а просто скрывает скролл.

Answer 1

Вы же сами добавили диву stretch overflow:auto. Вот он и дает тот второй скролл. Нужно убирать)

.stretch {
  background: #f9f9f9;
  height: 100%;  
  max-height:100%;
  margin: 5px;
  overflow:auto; <<<---------
}

Если нужно, как я понял, убрать внешний скролл и оставить на третьем диве его, то добавляем боди оверфлоу, а ц дива скролл оставляем

html, body {
   margin:0;
   padding:0
   overflow: hidden;
}

Answer 2

Скажем так: во первых сложно работать с размерами, когда у вас у совершенно разных блоков один класс section

<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>

во вторых сложность добавляет margin, он не учитывается, когда мы задаем высоту. Получается высота 100% + марджины.

в третьих я не понимаю зачем блок 2 и блок 3 вставлять в отдельный блок, это так же усложняет, но ладно мало ли, не мое дело. я немного подправил код у себя, добавил min-height нашему второму общему блоку, теперь у него есть минимальная высота в 50% и он тянется до края экрана. min-height больше подходит для данного случая

html, body {
  margin:0;
  padding:0;
}

.main-wrapper {
  height: 100vh;
  
}

.section {
  background: grey;
  height: 100%;  
  display: flex;
  flex-direction: column;
}

.stretch {
  background: #f9f9f9;
  max-height: 100%;  
  margin: 5px;
}

.div2And3Parent {
  background: grey;
  min-height: 50%;  
  display: flex;
  flex-direction: column;
}

.fixed
{
  background: #f9f9f9;
  margin: 5px;
}

.scroll 
{
  overflow: auto; 
}

  <div class="main-wrapper">
    <div class="section">
      <div class="fixed"><h4>Div#1</h4></div>
      <div class="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>

Answer 3

Вам нужно указать высоту для родительского элемента .section div2And3Parent. Один из способов сделать это - сделать его растягивающимся по высоте, используя flexbox:

.section.div2And3Parent {
  flex: 1;
}

Обновленный код:

<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>

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;
}

.section.div2And3Parent {
  flex: 1;
}

БЛОГ НА HUSL

Некорректно работает свойство height:100% для дочерних элементов

Ответы (3 шт):