Witam. Mam listę, która wychodzi poza diva, czego bym nie chciał. Nie mam jednak pomysłu, jak zrobić, aby spoza tego diva nie wychodziła. Wartości w % nie działają, w vh też. Tak wygląda kod html:
<div id="container">
<div id="above-list">
<div id="profile">
<img src="../../../assets/img/cat.png" class="img">
<div id="name">Nieznany Anonimek</div>
</div>
<div id="header">
Chats
</div>
</div>
<ul id="contacts">
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
<li><app-contact></app-contact></li>
</ul>
</div>
A tak CSS:
* {
box-sizing: border-box;
}
#container {
max-height: 95vh;
height: 95vh;
width: 20%;
color: #ffffff;
min-width: 350px;
background-color: #202020;
font-family: 'Comfortaa', cursive;
}
#above-list {
padding: 20px;
}
#profile {
display: flex;
font-size: 20px;
align-items: center;
}
#name {
padding-left: 20px;
}
.img {
max-width: 60px;
max-height: 60px;
border-radius: 50%;
}
#header {
color: #EC4C4C;
text-align: center;
font-size: 30px;
font-weight: bold;
padding-top: 20px;
margin-bottom: 20px;
}
#contacts {
overflow: auto;
max-height: 100%;
}
Dlaczego tak się dzieje? Tak wygląda efekt:
https://imgur.com/a/2gmW8Db