DIV with max-height not expanding - html

Question

I've made a drop-down list which attaches to a text input, and the list which appears beneath has a header and footer row, and scrolling content in between. JS fiddle here:
https://jsfiddle.net/tpgjjh81/3/
It works great, except I'd like the drop-down to have a flexible height, depending on its content, up to a specified max-height. However, if I change:
DIV.dropdown {
...
height: 100px;
...
}
to:
DIV.dropdown {
...
max-height: 100px;
...
}
...then the "content" part of the list doesn't show at all when the drop-down appears, only the header and footer rows. The DIV's within have height: 100% so I would have thought these would push the outer DIV to its max-height but it doesn't appear to be working?
edit: I've also tried adding height: auto alongside the max-height but it doesn't have any effect.

Answer 1

See this fiddle here: https://jsfiddle.net/tpgjjh81/22/
The main issue was to do with the DIV.scroll_inner having absolute positioning with 0 edges (to fill the scroll_outer container).
Let the outer container control its own content, and limit the inner content's height to max-height: 100px.
Essentially, what you are looking for is something like this:
DIV.wrapper {
display: inline-block;
position: relative;
}
DIV.dropdown {
display: none;
position: absolute;
clear: left;
left: 0;
right: 0;
border: 1px solid black;
}
DIV.list_container {
display: table;
width: 100%;
height: 100%;
}
DIV.header,DIV.footer {
display: table-row;
background-color: lightgray;
}
DIV.scroll_outer {
display: table-row;
height: auto;
background-color: white;
}
DIV.scroll_inner {
overflow: auto;
max-height: 100px;
}
EDIT I've also removed some now unnecessary properties from the CSS, and updated this above, and in the fiddle. This should at least get you off the ground.
Best of luck in your project! :)

Answer 2

I cleaned up your css. Not sure why you were using display table and setting up the height etc. Just hide the parent overflow and set child overflow to scroll and that should do it.
Also I moved the border to outer container so it is not cut off.
is_visible = false;
function Toggle() {
is_visible = !is_visible;
document.getElementById("dropdown").style.display = (is_visible ? "block" : "none");
}
DIV.wrapper {
display: inline-block;
position: relative;
}
DIV.dropdown {
display: none;
position: absolute;
clear: left;
left: 0;
right: 0;
height: 100px;
border-bottom: 1px solid black;
overflow: scroll;
}
DIV.list_container {
display: block;
border: 1px solid black;
border-bottom: 0px;
}
DIV.header,DIV.footer {
display: block;
background-color: lightgray;
}
DIV.scroll_outer {
display: block;
position: relative;
background-color: white;
}
DIV.scroll_inner {
overflow: hidden;
}
<div class="wrapper">
<input type="text" size="50" value="Click me" onclick="Toggle()" />
<div class="dropdown" id="dropdown">
<div class="list_container">
<div class="header">Header</div>
<div class="scroll_outer">
<div class="scroll_inner">
Item 1<br />
Item 2<br />
Item 3<br />
Item 4<br />
Item 5<br />
Item 6<br />
Item 7
</div>
</div>
<div class="footer">Footer</div>
</div>
</div>
</div>

Answer 3

height: auto;
max-height: 100px;
overflow: auto;