css: vertical scroller container

How to automatically adjust obtainer height?

HTML

<script src="https://code.angularjs.org/1.2.7/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-sanitize.min.js"></script>
<div ng-controller="myCtrl">
    <div ng-model="currentTab" ng-init="currentTab='Tab1'"/>
    <div ng-init="popovers = [	
		{	name: 'Popover1',	
            displayName: 'Pop over with two tabs',
			tabs: [
				{	name: 'Tab1',		
                    displayName: 'First tab',
					description: [
                        'First tab description, is very, very, very looong, in order to make the scroll triggered automatically by the nagivator.',
                        'Second line is there to add to the height of the content',
                        'Third line completes the whole content.'
                    ]
				},
				{	name: 'Tab2',		
                    displayName: 'Second tab',
					description: ['Second tab description']
				}
            ]
        }
    ]"/>
    
    <b>Tabs in popover</b>
    
    <div
        class="popover"
        ng-repeat="p in popovers" 
        >
        Popover name: {{p.displayName}}
        <div ng-repeat="t in p.tabs" 
            class="tab"
            ng-class="currentTab==t.name?'selected':''"
            ng-click="$parent.currentTab=t.name"
            >   
                {{t.name}}
        </div>
        
        <div  ng-repeat="t in p.tabs" 
            class="tabContent" 
            ng-class="currentTab==t.name?'selected':''"
            >
            <div>
                <h2>{{t.displayName}}</h2>
            </div>
            <div class="vScrollable">
                <ul>
                    <li ng-repeat="l in t.description">
                        {{l}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

body {
    font-family:"AvenirNextCondensed-Regular" sans-serif;
}
figure, div {
    padding: 4px;
}
li {
    text-decoration: underline;
    color: blue;
}
.popover {
    border: solid 1px red;
    width:  70%;
    height: 200px;
}    
.popover .tab {
    display: inline-block; 
    border: solid 3px gray;
    border-bottom: none;
    width:hidden;
    background-color: gray;
}
.popover .tab.selected {
    background-color: white;
}

.popover .tabContent {
    border-top: dotted 1px gray;
    display: none;
    height: 50px;
    background-color: red;
}

.popover .tabContent.selected {
    display: block;
}


.vScrollable {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    background-color: lightblue;
}

JavaScript

var app = angular.module('myApp', ['ngSanitize']);


app.controller('myCtrl', function ($scope, $location, $http) {

});