Iain Iain - 10 months ago 44
CSS Question

DIV with max-height not expanding

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

See this fiddle here: https://jsfiddle.net/tpgjjh81/5/

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;
  height: 100%;
  max-height: 100px;
  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;
  position: relative;
  background-color: white;
}

DIV.scroll_inner {
   overflow: auto;
   max-height: 100px;
}