Scrollable Card bootstrap

Question

I am using bootstrap 4. I have 3 columns in a single row. One of the columns contains a list and the other two do not. I want only the column with the list to be scrollable but not the entire container, which means that the scrollbar muss appear only within that column.

I would appreciate any help.

<div class="row">
<div class="col-sm-4">
  <div class="card">...

<div class="col-sm-4">
  <div class="card">...

<div class="col-sm-4">
  <div class="card">...

</div>

Answer 1

You could do something like this:

    <div class="row">
      <div class="col-sm-4">
        <div class="card">...</div>
      </div>
      <div class="col-sm-4 scroll">
        <div class="card">...</div>
      </div>
      <div class="col-sm-4">
        <div class="card">...</div>
      </div>
    </div>

then in your css:

.scroll {
    max-height: 100px;
    overflow-y: auto;
}