调整高度Tags Dynamically Generated By ng-if Directive

Question

问候和致敬的朋友们。

场景：我正在制作一个页面，它将根据后端的JSON信息生成发票。它在包含的div上使用ng-repeat，然后在多个p标签内使用ng-if，如下所示：

<div ng-repeat="thumb in responseArray" ng-if="responseArray.length >= 1" class="figures" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartA">{{thumb.theList[1][0]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartB">{{thumb.theList[1][1]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartC">{{thumb.theList[1][2]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartA">{{thumb.theList[2][0]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartB">{{thumb.theList[2][1]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartC">{{thumb.theList[2][2]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartA">{{thumb.theList[3][0]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartB">{{thumb.theList[3][1]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartC">{{thumb.theList[3][2]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartA">{{thumb.theList[4][0]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartB">{{thumb.theList[4][1]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartC">{{thumb.theList[4][2]}}</p>                
        </div>

问题是我希望div在运行时根据其内容进行理想的大小调整，或者只是能够动态设置两个不同的高度。 div的生成方式有两个整体选项：一个类型将大大缩短，当list.length为1时将使用，另一个将大约是大小的两倍。

我目前的css如下：

   .figures {
        border-width: 2px;
        border-style: solid;
        border-color: black;
        position: relative;
        height: 180px;
        top: -20px;
    }

我尝试了很多不同的东西，比如没有高度，将高度设置为auto，将overflow设置为auto，使用clearfix解决方法等等。

任何帮助，将不胜感激。