I am struggling to make a container div expand dynamically in height so that it always matches the height of its content.
The overall structure is
search.html
<div class="outer-container">
<div class="inner-container">
<div class="body">
<app-results></app-results>
</div>
</div>
</div>
results.html
<div class="card" *ngFor="let c of content; let index = index">
<h1 class="h">{{index}}</h1>
</div>
I have experimented with setting the .outer-container to [display: inline-flex][1];, which initially works well. However, when more cards are added dynamically to the view, the containing element remains fixed at its original position and does not adjust to accommodate the new content.
I have also tried various combinations of height: auto and height: 100% on all elements in the hierarchy, but I encounter issues where the parent's height either shrinks or appears too short when additional children extend beyond the page height.
In addition, using overflow: auto in my app results in a double scrollbar, making it unsuitable for this scenario.
How can I ensure that the container's full height remains consistent regardless of the number of elements?
More detailed StackBlitz available here. Click on the "search" link to navigate to the correct route (I included angular router to accurately reproduce the issue).