AngularJS set parent height from ng-repeat - html

Question

I have a ng-repeat that has a variable height.
If I use a fixed height everything looks good. But I need the height of the parent panel to adjust automatically according to the ng-repeat child elements, otherwise I have overflow problems.
Is there any way to do this?
With Fixed height (see overflow at the bottom):
Without Fixed Height:
The code of the panels:
<div class="my-panel" ng-repeat="x in month.days">
<div class="panel-today" ng-show="x.today">
TODAY
</div>
<div class="panel" ng-class="x.panel_class">
<div class="panel-heading {{x.weekend}}">{{x.day}} {{x.date | date : 'dd-MM'}}</div>
<div class="panel-body my-panel-body">
<div ng-show="x.suspension != ''" style="width: 100%; text-align: center">
<b>{{x.suspension}}</b>
</div>
<div ng-show="x.suspension == ''">
<div class="well well-sm day-well">
<div class="day_period">
<div class="pull-right">
{{x.times.day.from}}<br/>
{{x.times.day.to}}
</div>
<div class="day_head">DAY</div>
</div>
<div ng-repeat="grade in x.staff.day.m">
<div class="letterCircleM">
{{grade.code}}
</div> S SIPHO
</div>
<div ng-repeat="grade in x.staff.day.f" class="letterCircleF">
{{grade.code}}
</div>
</div>
<div class="well well-sm day-well">
<div class="day_period">
<div class="pull-right">
{{x.times.night.from}}<br/>
{{x.times.night.to}}
</div>
<div class="day_head">NIGHT</div>
</div>
<div ng-repeat="grade in x.staff.night.m">
<div class="letterCircleM">
{{grade.code}}
</div> S SIPHO
</div>
<div ng-repeat="grade in x.staff.night.f" class="letterCircleF">
{{grade.code}}
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="panel-suspend" ng-show="x.suspension != ''">
SUSPENDED
</div>
<div ng-show="x.suspension == ''">
{{x.contract}}
</div>
</div>
</div>
</div>

Answer 1

If fixed height works for you, why don't you add it to the parent based on the length of the data you are repeating in ng-repeat via ng-style?
ng-style="{
'height': 30 * RepeatData.length + 'px'
}
30 is the height of one "repeated" block