title: How to adjust scroll container height to make scrollable content perfectly adjusted
body: <p>I have a container with overflow-y:scroll.
  The content is higher than the container height, hence the scrolling.</p>
  
  <p>The question is how to adapt the height of the container automatically, when the container is next to a div that split a wider container div with fixed height.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/stephanedeluca/K5CjK/4/" rel="nofollow">fiddle</a></p>
  
  <p>My code is as follows:</p>
  
  <pre><code>   &lt;div  ng-repeat="t in p.tabs" 
          class="tabContent" 
          ng-class="currentTab==t.name?'selected':''"
          &gt;
          &lt;div&gt;
              &lt;h2&gt;{{t.displayName}}&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="vScrollable"&gt;
              &lt;ul&gt;
                  &lt;li ng-repeat="l in t.description"&gt;
                      {{l}}
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.popover .tabContent {
      border-top: dotted 1px gray;
      display: none;
      height: 50px;
      background-color: red;
  }
  
  .vScrollable {
      overflow-x: hidden;
      overflow-y: scroll;
      height: 100%;
      background-color: lightblue;
  }
  </code></pre>