Динамическая максимальная высота DIV на основе родительского

Question

Допустим, я следующее:

.wrap { height:400px; } 
.header { height:100px; } 
.footer { height:100px; } 

<div class="wrap"> 
    <div class="header"></div> 
    <div class="middle_row"></div> 
    <div class="footer"></div> 
</div> 

Есть ли CSS решение иметь .middle_row динамически растягивается до 200px?

Answer 1

Да, попробуйте Flexbox

.wrap { 
 
    display: flex; 
 
    height: 400px; 
 
    flex-direction: column; 
 
} 
 

 
.header, .footer { 
 
    flex: 0 0 100px; 
 
    background: lightblue; 
 
} 
 

 
.middle_row { 
 
    flex: 1; 
 
    background: lightgreen; 
 
}

<div class="wrap"> 
 
    <div class="header"></div> 
 
    <div class="middle_row"></div> 
 
    <div class="footer"></div> 
 
</div>

Answer 2

Вы можете просто дать ему height из 50%. Это установит его на половину высоты его родителя (400 пикселей/2 = 200 пикселей).

.middle_row { height: 50%; }