I am currently working on a recipes app that displays a list of recipes with images in individual tiles down the right-hand side. However, I have encountered an issue where the browser scroll bar does not appear when the list extends beyond the visible area, causing the third recipe tile to go off-screen without any way to scroll down and view it.
Despite trying various suggested solutions, such as setting overflow to auto on the container, the problem still persists.
Below is the relevant code snippet:
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>