title: Scroll two bootstrap cols independently
body: <p>I have two <code>bootstrap 4</code> cards on a page that contain content of differing length. </p>
  
  <p>I want to set the initial height of the cards to extend to the bottom of the page, and <code>overflow-y: scroll</code> on each card independently. </p>
  
  <p>See below for my code (<a href="https://jsfiddle.net/0yopng1j/5/" rel="nofollow noreferrer">same thing as a fiddle</a>).</p>
  
  <p>Currently, scrolling on one card causes the other to scroll too. How can I get them to scroll independently? The answer to <a href="https://stackoverflow.com/questions/31647945/two-divs-scrolling-independently">a similar question</a> suggests setting the height of the parent div, which I am currently doing (<code>#message-row{height: 100%}</code>), so I can't see what I'm doing wrong.</p>
  
  <p>I would also like to make sure that the footer for the right had card is always at the bottom of the <strong>visible</strong> card (i.e. so that you don't have to scroll to the bottom of the card to see it. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.message-card {
    font-weight: 400;
    height: 100%;
    overflow-y: scroll;
  }
  .inbox-card {
    font-weight: 300;
    height: 100%;
    overflow-y: scroll;
  }
  #message-row {
    height: 500px;
    color: #232323;
    overflow-y: scroll;
    text-align: left;
  }
  #message-row .card {
    border-radius: 5px;
  }
  #message-row input {
    width: 70%;
    color: #0e5286 !important;
  }
  #message-row input.form-control {
    height: unset !important;
    background: #f5f9fc;
  }
  #message-row .inbox-row {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 1em;
  }
  #message-row .inbox-row:hover {
    cursor: pointer;
    background-color: #f5f9fc;
  }
  .speech-bubble {
    position: relative;
    max-width: 100%;
    min-height: 40px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 0.5em;
  }
  .speech-bubble.them {
    background: rgba(155, 194, 214, 0.6);
  }
  .speech-bubble.me {
    background: rgba(156, 199, 160, 0.6);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"&gt;
  
  
  &lt;div class="container d-flex h-100 flex-column"&gt;
  
    &lt;div id="message-row" class="row mb-4"&gt;
      &lt;div class="col-lg-5 pb-md-4 pb-lg-0"&gt;
        &lt;div class="card"&gt;
          &lt;div class="searchBar"&gt;
            &lt;input id="inbox-search" class="form-control mx-auto mt-2" type="text" placeholder="Search..." /&gt;
          &lt;/div&gt;
          &lt;div id="inbox" class="card-body"&gt;
            &lt;div class="row inbox-row"&gt;
              &lt;div class='col-12'&gt;
                &lt;p&gt;Some content 1 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row inbox-row"&gt;
              &lt;div class='col-12'&gt;
                &lt;p&gt;Some more content&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row inbox-row"&gt;
              &lt;div class='col-12'&gt;
                &lt;p&gt;Some content again &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row inbox-row"&gt;
              &lt;div class='col-12'&gt;
                &lt;p&gt;Some content asdaa&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row inbox-row"&gt;
              &lt;div class='col-12'&gt;
                &lt;p&gt;Some asdacc &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row inbox-row"&gt;
              &lt;div class='col-12'&gt;
                &lt;p&gt;Some contention&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row inbox-row"&gt;
              &lt;div class='col-12'&gt;
                &lt;p&gt;Some contention&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row inbox-row"&gt;
              &lt;div class='col-12'&gt;
                &lt;p&gt;Some contention&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row inbox-row"&gt;
              &lt;div class='col-12'&gt;
                &lt;p&gt;Some contention&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-7"&gt;
        &lt;div class="card message-card"&gt;
          &lt;div id="conversation" class="card-body"&gt;
            &lt;div class='row'&gt;
              &lt;div class='col-8 float-right'&gt;
                &lt;div class='speech-bubble me'&gt;A message&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class='row'&gt;
              &lt;div class='col-8 float-right'&gt;
                &lt;div class='speech-bubble me'&gt;Another message&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class='row'&gt;
              &lt;div class='col-8 float-right'&gt;
                &lt;div class='speech-bubble them'&gt;A reply&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;div id="new-message" class="card-footer"&gt;
          &lt;form id="reply-form" method="POST"&gt;
            &lt;input type="hidden" name="sender" value="&lt;abcd"&gt;
            &lt;div class="form-info-text form-group mb-0"&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-11"&gt;
                  &lt;textarea class="form-control autoExpand" rows="1" name="message"&gt;&lt;/textarea&gt;
                &lt;/div&gt;
                &lt;div class="col-1 send-col"&gt;
                  &lt;button type="submit" disabled&gt;&lt;i id="sendMessage" class="far fa-paper-plane"&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='container-fluid'&gt;
  &lt;div class='row'&gt;
  &lt;div class='col-12'&gt;
  &lt;h1&gt;
  Some other container that expands full width...
  &lt;/h1&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>