让Trello卡片列表滚动

Question

我正在尝试在HTML页面中重建Trello列表。除了一个小问题我几乎完成了。这是我的代码：

＆＃13;

＆＃13;

* {
    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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

正如您在运行代码段时所看到的那样，这些卡片已从列表中溢出。

我已将列表的max-height设置为440px。这是我对包含一堆卡片的div的设置：

.card-list {
    overflow-y: auto;
    overflow-x: visible;
}

我希望卡片在<div class="card-list">内滚动。我希望只有 垂直滚动条，而滚动条不会遮挡卡。这是我想要的结果：

但我不希望滚动条或其他空间出现在卡片数量较少的列表中：

我无法弄清楚如何去做。如何使卡片堆叠在容器内？

Answer 1

您还需要为max-height元素设置child。如果您只想显示垂直滚动条，请增加容器的宽度以占据全文。

.list {
  max-height: 450px; /* To allow the boxes to be seen completely */
  width: auto; /* Rearrange the width when there is no scroll bar */
}

.card-list {
  max-height: 410px; /* To initiate vertical scroll bar */
  overflow-x: visible;
  overflow-y: auto;
}

.list {
  width: auto; /* To remove Horizontal scroll bar */
}

#main {
  text-align: center;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 10px;
}
.list {
  margin: 5px;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 3px;
  display: inline-block;
  max-height: 450px;
  width: auto;
  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;
  max-height: 410px;
}
.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: auto;
  max-width: 220px;
  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;
}

<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 href="" target="_blank" class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
      </div>
      <div class="card"> <a href="" target="_blank" class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a>
      </div>
      <div class="card"> <a href="" target="_blank" class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a>
      </div>
      <div class="card"> <a href="" target="_blank" class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a>

      </div>
      <div class="card"> <a href="" target="_blank" class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a>
      </div>
      <div class="card"> <a href="" target="_blank" class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a>
      </div>
      <div class="card"> <a href="" target="_blank" class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
      </div>
      <div class="card"> <a href="" target="_blank" class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a>
      </div>
      <div class="card"> <a href="" target="_blank" class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a>
      </div>
      <div class="card"> <a href="" target="_blank" class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a>
      </div>
      <div class="card"> <a href="" target="_blank" class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a>
      </div>
      <div class="card"> <a href="" target="_blank" class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a>
      </div>
    </div>
  </div>
</div>