Я пытаюсь восстановить список Trello на странице HTML. Я почти закончил, за исключением одной маленькой проблемы. Это код, который у меня есть:
* {
font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;
}
#main {
text-align: center;
padding: 10px;
}
.list {
margin: 5px;
border: 1px solid rgb(204, 204, 204);
border-radius: 3px;
display: inline-block;
max-height: 440px;
max-width: 240px;
padding: 4px 4px 0px;
background-color: rgb(226, 228, 230);
}
.list-header {
padding: 8px 4px;
position: relative;
min-height: 19px;
display: block;
line-height: 18px;
text-align: left;
}
.list-title {
cursor: pointer;
display: inline;
font-size: 15px;
font-weight: bold;
line-height: 18px;
margin: 0px;
min-height: 19px;
min-width: 30px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
color: rgb(77, 77, 77);
}
.card-list {
overflow-y: auto;
overflow-x: visible;
}
.card {
overflow: auto;
padding: 6px 8px 4px;
margin-bottom: 4px;
position: relative;
display: block;
cursor: pointer;
color: rgb(77, 77, 77);
font-size: 14px;
line-height: 18px;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
width: 214px;
text-align: left;
background-color: rgb(255, 255, 255);
}
.card-title {
color: rgb(77, 77, 77);
clear: both;
display: block;
font-weight: 400;
margin: 0px 0px 4px;
overflow: hidden;
text-decoration: none;
word-wrap: break-word;
background-color: transparent;
}<p>List of cards that overflow</p>
<div id="main">
<div class="list">
<div class="list-header">
<h2 class="list-title">A List of Cards</h2>
</div>
<div class="card-list">
<div class="card"><a class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
<div class="card"><a class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a></div>
<div class="card"><a class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a></div>
<div class="card"><a class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a>
</div>
<div class="card"><a class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a></div>
<div class="card"><a class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a></div>
<div class="card"><a class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
<div class="card"><a class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a></div>
<div class="card"><a class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a></div>
<div class="card"><a class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a></div>
<div class="card"><a class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a></div>
<div class="card"><a class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a></div>
</div>
</div>
</div>
<p>List of cards that does not overflow</p>
<div id="main">
<div class="list">
<div class="list-header">
<h2 class="list-title">A List of Cards</h2>
</div>
<div class="card-list">
<div class="card"><a class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
<div class="card"><a class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a></div>
</div>
</div>
</div>Как видно из выполнения фрагмента кода, карточки выходят за пределы списка.
Я установил max-height списка на 440px. И это настройки, которые у меня есть для div, содержащего стопку карт:
.card-list {
overflow-y: auto;
overflow-x: visible;
}
Я хочу, чтобы карточный свиток оказался внутри <div class="card-list">. Я хочу иметь только вертикальную полосу прокрутки, без полосы прокрутки, закрывающей карточки. Это результат, который я хочу:
Но я не хочу, чтобы в списках с меньшим количеством карточек отображались полосы прокрутки или дополнительное пространство:
Я просто не могу понять, как это сделать. Как сделать так, чтобы стопка карт прокручивалась внутри их контейнера?
