Align child div max-height with parent div max-height
I have below code and I do not want to change the maximum height of the wrapper control.
I was hoping there was a way to match the height of the content to the height of the wrap so that I could scroll through the list and save a static static file.
<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;
}
source to share
Ok learned something new. max-height doesn't work with what I'm trying to do. I have to set the 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;
}
source to share
This can be done using flexbox. In the following example, change the height
div .wrap
to any arbitrary number between 0 and 200px and you will see the content dynamically resize to the new height .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>
source to share