Max-height and nanoscroller + AngularJS NgRepeat

Question

I'm trying to make a div that expands to a max-height using nanoScroller and ngrepeat of angularjs, but I can't make it work, here is the plunkr: Plunkr.

If you change the _Array length to 5 you will see what I am saying. The height of the div doesn't adjust to the content... it stays at max-height when it should be shrinking to fit.

Here is the HTML code:

<div id="console" ng-app="myApp">
  <header>Title Here</header>
  <section>
    <ul ng-init="(_Array = []).length = 15;" class="nano">
      <div class="nano-content">
        <li ng-repeat="i in _Array track by $index" post-render="">{{ $index }}</li>
      </div>
    </ul>
  </section>
</div>

and the directive to use nanoScroller:

angular.module('myApp', [])
    .directive('postRender', postRender);

postRender.$inject = ['$timeout'];

function postRender($timeout) {
    return {
        link: function ($scope, iElm, iAttrs, controller) {
            $timeout(function () {
                jQuery('.nano').nanoScroller({
                    preventPageScrolling: true
                })
            }, 100);
        }
    }
}

and my SCSS:

* {
    box-sizing: border-box;
}
body, html {
    height: 100%;
}
#console {
    margin: 0 auto;
    max-height: 500px;
    height: 100%;
    width: 330px;
    opacity: 0.9;
    color: #FFF;

    header {
        padding: 15px;
        background: none repeat scroll 0 0 rgba(21, 21, 21, 0.8);
    }

    section {
        overflow: auto;
        background-color: #333;
        height: 100%;

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            & div {
                padding: 15px 15px;
            }
            li {
                margin-bottom: 5px;
                width: 100%;
                background-color: red;
                padding: 15px;
            }
        }
    }
}

Answer 1

The problem is that your nanoScroller code is placing your content in an absolutely positioned div. This means that your entire unordered list is out of the flow of content and will not fill/expand the height of the parent.

You can fix it by removing position: absolute; from the scrollable container and moving the max-height declaration to it. So for instance:

.nano>.nano-content {
  position: relative;
  max-height: 500px;
}

You will then also have to remove height: 100%; from the parent container.

Here your adjusted plnkr.

Answer 2

Replace your styles with this

#console {
  margin: 0 auto;
  height: 500px; 
  width: 330px;
  opacity: 0.9;
  color: #FFF;
}
#console section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 500px;
}