CODEWITHSUNDEEP
css
viciouskinid
viciouskinid

Reputation: 83

match child div max-height to parent div max-height

I have the below code and I do not want to modify the max-height of wrap control.

I was hoping there would be a way to match the content height to the wrap height so I am able to scroll the list and keep the header static.

<div class='wrap'>
 <div class='content'>
        <div class="header">
            <h1>Header</h1>
        </div>
        <div class="list">
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
</div>


h1
{
    background:green;
}

.wrap
{
    max-height:200px;
    overflow-y:scroll;
    background:blue;
}
.content
{
    background:red;
}

http://jsfiddle.net/jz89u91s/

Upvotes: 3

Views: 1902

Answers (2)

viciouskinid
viciouskinid

Reputation: 83

Ok learnt some new things. max-height wont work with what I am trying to do. I have to set a height.

The below code works

http://jsfiddle.net/3r23t2nu/2/

<div id="container">
    <div id="head">header</div>
    <div id="inner">
        <ul id="nav">
            <li><a href="#">1</a>

            </li>
            <li><a href="#">2</a>

            </li>
            <li><a href="#">3</a>

            </li>
            <li><a href="#">4</a>

            </li>
            <li><a href="#">1</a>

            </li>
            <li><a href="#">2</a>

            </li>
            <li><a href="#">3</a>

            </li>
            <li><a href="#">4</a>

            </li>
            <li><a href="#">1</a>

            </li>
            <li><a href="#">2</a>

            </li>
            <li><a href="#">3</a>

            </li>
            <li><a href="#">4</a>

            </li>
            <li><a href="#">1</a>

            </li>
            <li><a href="#">2</a>

            </li>
            <li><a href="#">3</a>

            </li>
            <li><a href="#">4</a>

            </li>
        </ul>
    </div>
</div>

   html, body, #inner {
   }
   #container {
       height: 150px;
       border: 4px red solid;
       padding-bottom: 30px;
   }
   #inner {
       overflow-y:scroll;
       border: 4px blue solid;
       margin-top: 30px;
       height: 100%
   }
   #head {
       height:30px;
       border: 4px yellow solid;
       position: absolute;
   }
   #nav {
       margin: 0;
       border: 4px green solid;
   }

Upvotes: -1

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

This can be accomplished using flexbox. In the following example, please change the height of the .wrap div to any arbitrary number between 0 and 200px, and you can see that the content dynamically resizes to the new height of .wrap.

Live Example:

h1
{
    background:green;
}

.wrap
{
    display: flex;
    flex-direction: column;
    height: 150px;
    max-height:200px;
    background:blue;
}
.content
{
    background:red;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.list {
    overflow-y:scroll;
    flex-grow: 1;
    flex-basis: 0;
}
<div class='wrap'>
    <div class='content'>
        <div class="header">
            <h1>Header</h1>
        </div>
        <div class="list">
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions