In the case of a fixed height container with two vertical divs, I am aiming for the first div to be as tall as its content, up to 80% of the parent div's height. After that point, the content within the first div should scroll. The second div will then expand to fill the remaining space in the parent container, but always keeping a minimum height.
I have experimented with different approaches to achieve this layout, but so far it seems like JavaScript is necessary to accomplish it.
To showcase my issue, I have created a sample on codepen for others to view and potentially modify. While I understand that using JavaScript would solve the problem, I am curious if there might be a way to achieve the desired layout without relying on JavaScript.
<body layout="row" ng-app="myApp" ng-cloak>
<div flex layout="column" class="boxWithHeight" layout-padding>
<section flex="grow" style="overflow-y:auto"><div>Place your lengthy content here</div></section>
<section style="min-height:100px">flex</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
<script>angular.module('myApp', ['ngMaterial'])</script>
</body>