Scroll bar not showing when elements go beyond page view - css

Question

I am creating a simple recipes app. A list of recipes with there images are shown down the right hand side in individual tiles. The problem I am having is that when the list of recipe tiles goes beyond the browser view, the browser scroll bar does not appear (I have chrome as my browser) and the 3rd recipe tile goes beyond the browser page without being able to scroll down to see the rest of it.
I have found similar questions asked on here and have tried the resolutions provided (such as setting overflow to auto on the container), none of which have resolved my issue.
Here is the relevant code:
h2 {
font-size: 280%;
font-family: 'Lobster', cursive;
left: 160px;
position: relative;
top: 15px;
color: rgb(90, 205, 250);
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
* {
background-color: transparent;
width: 265px;
}
img {
border-radius: 12px;
height: 100px !important;
width: 261px;
right: 3px;
position: absolute;
bottom: 76px;
}
.list-item {
display: flex;
top: 0px;
position: relative;
left: 88px;
background-color: white;
border-radius: 12px;
margin-top: 15px;
border: solid #a84605 1.5px;
color: hsl(17, 89%, 40%);
height: 180px;
}
.item-text {
top: 75px;
position: relative;
color: rgb(100, 100, 100);
}
.recipe-container {
height: auto;
overflow: auto;
width: auto;
}
<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
<h2>Recipes</h2>
<div class="recipe-container">
<div *ngFor="let recipe of recipes" class="list-item">
<a href="#" class="list-group-item clearfix" (click)="onRecipeSelected(recipe)">
<img [src]="recipe.imagePath" alt="{{ recipe.name }}" class="img-responsive">
<div class="pull-left">
<h4 class="list-group-item-heading item-text">{{ recipe.name }}</h4>
<p class="list-group-item-text item-text">{{ recipe.description }}</p>
</div>
</a>
</div>
</div>

Answer 1

I think the problem is that you set your height to 'auto' in .recipe-container. Try setting a fixed height of max-height. You could use 'vw' unit to set the height or '%'.