Scroll two bootstrap cols independently - html

Question

I have two bootstrap 4 cards on a page that contain content of differing length.
I want to set the initial height of the cards to extend to the bottom of the page, and overflow-y: scroll on each card independently.
See below for my code (same thing as a fiddle).
Currently, scrolling on one card causes the other to scroll too. How can I get them to scroll independently? The answer to a similar question suggests setting the height of the parent div, which I am currently doing (#message-row{height: 100%}), so I can't see what I'm doing wrong.
I would also like to make sure that the footer for the right had card is always at the bottom of the visible card (i.e. so that you don't have to scroll to the bottom of the card to see it.
.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);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<div class="container d-flex h-100 flex-column">
<div id="message-row" class="row mb-4">
<div class="col-lg-5 pb-md-4 pb-lg-0">
<div class="card">
<div class="searchBar">
<input id="inbox-search" class="form-control mx-auto mt-2" type="text" placeholder="Search..." />
</div>
<div id="inbox" class="card-body">
<div class="row inbox-row">
<div class='col-12'>
<p>Some content 1 </p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some more content</p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some content again </p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some content asdaa</p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some asdacc </p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some contention</p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some contention</p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some contention</p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some contention</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="card message-card">
<div id="conversation" class="card-body">
<div class='row'>
<div class='col-8 float-right'>
<div class='speech-bubble me'>A message</div>
</div>
</div>
<div class='row'>
<div class='col-8 float-right'>
<div class='speech-bubble me'>Another message</div>
</div>
</div>
<div class='row'>
<div class='col-8 float-right'>
<div class='speech-bubble them'>A reply</div>
</div>
</div>
</div>
<div id="new-message" class="card-footer">
<form id="reply-form" method="POST">
<input type="hidden" name="sender" value="<abcd">
<div class="form-info-text form-group mb-0">
<div class="row">
<div class="col-11">
<textarea class="form-control autoExpand" rows="1" name="message"></textarea>
</div>
<div class="col-1 send-col">
<button type="submit" disabled><i id="sendMessage" class="far fa-paper-plane"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-12'>
<h1>
Some other container that expands full width...
</h1>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<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"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 1

Remove height and overflow from class message-row also reduce height in message-card and include a class inbox in first card
.inbox {
font-weight: 300;
height: 80%;
overflow-y: scroll;
}
.message-card {
font-weight: 400;
height: 80%;
overflow-y: scroll;
}
.inbox {
font-weight: 300;
height: 80%;
overflow-y: scroll;
}
#message-row {
color: #232323;
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);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<div class="container d-flex h-100 flex-column">
<div id="message-row" class="row mb-4">
<div class="col-lg-5 pb-md-4 pb-lg-0">
<div class="card inbox">
<div class="searchBar">
<input id="inbox-search" class="form-control mx-auto mt-2" type="text" placeholder="Search..." />
</div>
<div id="inbox" class="card-body ">
<div class="row inbox-row">
<div class='col-12'>
<p>Some content 1 </p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some more content</p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some content again </p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some content asdaa</p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some asdacc </p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some contention</p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some contention</p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some contention</p>
</div>
</div>
<div class="row inbox-row">
<div class='col-12'>
<p>Some contention</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="card message-card">
<div id="conversation" class="card-body">
<div class='row'>
<div class='col-8 float-right'>
<div class='speech-bubble me'>A message</div>
</div>
</div>
<div class='row'>
<div class='col-8 float-right'>
<div class='speech-bubble me'>Another message</div>
</div>
</div>
<div class='row'>
<div class='col-8 float-right'>
<div class='speech-bubble them'>A reply</div>
</div>
</div>
</div>
<div id="new-message" class="card-footer">
<form id="reply-form" method="POST">
<input type="hidden" name="sender" value="<abcd">
<div class="form-info-text form-group mb-0">
<div class="row">
<div class="col-11">
<textarea class="form-control autoExpand" rows="1" name="message"></textarea>
</div>
<div class="col-1 send-col">
<button type="submit" disabled><i id="sendMessage" class="far fa-paper-plane"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-12'>
<h1>
Some other container that expands full width...
</h1>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<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"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 2

Actually after banging my head against the desk for several hours I realised that the solution was simple: It's the cols that need overflow-y: scroll, not the cards. Thus adding class scroll-col to each column fixes the problem:
.scroll-col{
height: 100%;
overflow-y: scroll;
}
(See fiddle)