Я создаю простое приложение рецептов. Список рецептов с изображениями там показан справа внизу в отдельных тайлах. Проблема, с которой я сталкиваюсь, заключается в том, что когда список плиток рецептов выходит за рамки просмотра браузера, полоса прокрутки браузера не отображается (у меня в качестве браузера chrome), а третья плитка рецептов выходит за пределы страницы браузера, не имея возможности прокрутите вниз, чтобы увидеть остальную часть.
Я нашел похожие вопросы, заданные здесь, и попробовал предоставленные решения (например, установив переполнение на auto для контейнера), ни один из которых не решил мою проблему.
Вот соответствующий код:
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>