Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: max-height: remaining space

Tags:

html

css

The problem is described in this image:

EDIT :
The first included div should always be visible. The second one is hiding its remaining content when main div is fully filled.

<div style="height:100%">
    <div>Dynamic ajax content</div>
    <div style="max-height:[remaining space]">Dynamic ajax content</div>
</div>

Here is a fiddle of what I have so far.

like image 427
mu3 Avatar asked Aug 14 '11 22:08

mu3


1 Answers

Solution:

HTML

<div id="outer">
    <div id="inner_fixed">
        I have a fixed height
    </div>

    <div id="inner_remaining">
        I take up the remaining height
    </div>
</div>

CSS

#outer {
   display: flex;
   flex-flow: column;
   height: 100%;
}
 
#inner_fixed {
   height: 100px;
   background-color: grey;
}
 
#inner_remaining {
   background-color: #DDDDDD;
   flex-grow : 1;
}

There are other solutions provided in this article: https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height

like image 148
Mohamed Hana Avatar answered Oct 23 '22 19:10

Mohamed Hana