Как вычислить высоту динамических элементов?

Question

Вот мой код:

.parent{ 
 
    position: fixed; 
 
    border: 1px solid; 
 
    height: 40%; 
 
    width: 300px; 
 
    max-height: 200px; 
 
} 
 

 
.first_child{ 
 
    border: 1px solid blue; 
 
    padding: 10px; 
 
    height: 20px; 
 
    text-align: center; 
 
} 
 

 
.second_child{ 
 
    border: 1px solid red; 
 
    height: 100%; 
 
    overflow-y: scroll; 
 
}

<div class="parent"> 
 
    <div class="first_child">title</div> 
 
    <div class="second_child"> 
 
    one<br>two<br>three<br>four<br>five<br>six<br>seven<br>eight<br>night<br>ten<br> 
 
    </div> 
 
</div>

Как вы видите .second_child вне parent. Я хочу сохранить его внутри элемента .parent. Как я могу это сделать?

Другими словами, я хочу, чтобы реализовать что-то вроде этого:

.second_child{ 
    height: 100% - 40px;  
       /* 40px: 20px of .first_child's height, 10+10px of .first_child's padding */ 
    ... 
} 

Примечание: Я не хочу использовать ни calc() или коробка-проклейки: border-box; .. Потому что они не поддерживаются в старых браузеров, таких как IE7. Поэтому я ищу третий подход.

Answer 1

Будет что-то вроде этой работы?

.parent{ 
 
    position: relative; 
 
    border: 1px solid; 
 
    height: 100%; 
 
    width: 300px; 
 
    max-height: 200px; 
 
    min-height: 100px; 
 
} 
 

 
.first_child{ 
 
    border: 1px solid blue; 
 
    padding: 10px; 
 
    height: 20px; 
 
    text-align: center; 
 
} 
 

 
.second_child{ 
 
    border: 1px solid red; 
 
    overflow-y: scroll; 
 
    position: absolute; 
 
    top: 40px; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div class="parent"> 
 
    <div class="first_child">title</div> 
 
    <div class="second_child"> 
 
    one<br>two<br>three<br>four<br>five<br>six<br>seven<br>eight<br>night<br>ten<br> 
 
    </div> 
 
</div>