Make Trello list of cards scroll

Question

I am trying to reconstruct a Trello list in an HTML page. I am almost done except for one small problem. This is the code I have:

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

As you can see from running the code snippet, the cards are overflowing out of the list.

I have set the max-height of the list to 440px. And this is the setting I have for the div containing the stack of cards:

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

I want to get the card scroll inside <div class="card-list">. I want to have only the vertical scrollbar without the scrollbar obscuring the cards. This is the result I want:

But I don't want scrollbars or additional space to appear in lists with fewer number of cards:

I just can't figure out how to do it. How do I make the card stack scroll inside their container?

Answer 1

You need to set the max-height for the child element as well. If you just want to show the vertical scrollbar, increase the width of the container to occupy the full text.

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