У меня есть два списка в контейнере.Я хочу, чтобы один из списков был статичным, а другой - прокручиваться.Прямо сейчас я могу заставить его работать несколько, но заголовок списка для второго списка прокручивает сам список.Независимо от того, как я изменяю overflow - прокрутка или авто между делениями, это не дает мне то, что мне нужно.
<div class="container">
<div class="list nearby">
<div class="header">
<div class="title">
<p>Nearby users</p>
</div>
</div>
<div class="userlist">
<User v-for="user in nearbyUsers" :key="user.UcpID" v-bind:user="user"/>
</div>
</div>
<div class="list">
<div class="header all">
<div class="title">
<p>All online users</p>
</div>
<div class="searchfield">
<input type="text" placeholder="..." v-model="search">
</div>
<div class="search">
<i class="fas fa-search"></i>
</div>
</div>
<div class="userlist">
<User v-for="user in users" :key="user.UcpID" v-bind:user="user"/>
</div>
</div>
</div>
.container {
position: absolute;
width: 100%;
height: 100%;
background: rgb(255, 100, 100);
background-size: 100% 100%;
font-family: "Roboto", sans-serif;
border-radius: 25px;
text-align: center;
transition: all 0.5s ease;
padding-top: 26px;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
}
::-webkit-scrollbar {
width: 0px;
}
p {
margin: 0;
}
.header {
color: white;
font-size: 20px;
padding: 0 15px;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
}
.header.all {
background: rgb(218, 71, 71);
padding-top: 10px;
position: sticky;
}
.header i {
font-size: 16px;
}
.userlist {
background: rgb(255, 249, 249);
overflow-y: scroll;
}
.searchfield input[type="text"] {
outline: none;
background: transparent;
border: none;
text-align: right;
color: white;
}
.list {
overflow-y: auto;
}
.list.nearby {
min-height: fit-content;
}
https://jsfiddle.net/introzen/erhav0nz/4/
Можно ли также установить min-height и max-height для .list.nearby и увеличить его до 5 пунктов до того, как активировать прокрутку?