Как сделать div взять оставшуюся высоту, не зная высоты?

Question

У меня 2 элементов внутри .container, то есть .header и .overflowElem.

Я хочу .overflowElem взять оставшуюся высоту .container, и это должно быть переполнение-у: авто.

HTML

<div class="box"> 

    <div class="container"> 

    <div class="header"> 
     <h1>HEADER</h1> 
    </div> 

    <div class="overflowElem"> 
     <ul> 
     <li><a href="#">ITEM 1</a></li> 
     <li><a href="#">ITEM 2</a></li> 
     <li><a href="#">ITEM 3</a></li> 
     </ul> 
    </div> 

    </div> 

</div> 

Все это HTML вводится с помощью Ajax Jquery, как и так:

$.ajax({ 
    type: "GET", 
    url: "include/get_list.php", 
    data: params 
}).done(function(data) { 
    var container = $("<div></div>") 
     .attr("class", "container") 
     .html(data) 
     .hide() 
     .appendTo(box); 

}).fail(function() { 
    alert("Error."); 

}).always(function(data) { 

}) 

Обратите внимание, как вар контейнер скрыт в момент инициализации

CSS :

div.box { 
    width: 700px; 
    border: 1px solid red; 
    padding: 45px 20px 20px; 
} 

div.container { 
    height: 500px; 
    background-color: #bbb; 
} 

div.header { 
    background-color: red; 
    /* HEIGHT in pixels is UNKNOWN */ 
} 

div.overflowElem { 
    overflow-y: auto; 
    /* 
    CANNOT USE THIS BECAUSE i DON'T know the height of .header 
    height: calc(100% - height of .header in pixels);*/ 
} 

jsfiddle:

https://jsfiddle.net/n4z02gL2/1/

Теперь, я мог бы добавить высоту .header и рассчитать высоту .overflowElem с использованием известково() и бинго!

НО, потому что все HTML вставляется с помощью Ajax Jquery, и он скрыт в момент инициализации, я не tknowthe высота ни я не могу получить его с помощью Ajax, поскольку контейнер скрыт

Итак, Каково решение? Любые идеи, советы, трюки, хаки ... Спасибо

Answer 1

Использование flexbox все, что вам нужно сделать, это обновить правило div.container (без префикса, для краткости).

div.container { 
    height: 500px; 
    background-color: #bbb; 

    // add these properties here 
    display: flex; 
    flex-direction: column; 
} 

Предоставлено, предполагается, что ваша поддержка браузера позволяет использовать flexbox. CSS Tricks has a great write-up of flexbox here.