I would like to ensure that only the card-body block is scrollable. Currently, the page does a bit of scrolling when the card-body block overflows (resulting in 2 scroll bars). The lorem text was added as an example of an overflow. The desired outcome is depicted in the image. The crossed-out scroll bar should be eliminated, and the ticked one should remain view image here
html, body {
height: 100%;
}
.ts_panel {
height: 100%;
border-right: 2px solid #646464;
background: rgb(44,44,44);
}
.ts_usernameInp {
width: 40%;
margin: 0 auto;
}<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a67667f7a7d7b6868493c273b273826696e7f6838">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container-fluid d-flex h-100 flex-column">
<header class="row justify-content-center align-items-center bg-dark text-white text-center py-2">
<span>Link to connect to chat: <a href="/chat?chat_id=tZGuDGqdHa0e3IAfTRY7">127.0.0.1:8000/chat/?chat_id=tZGuDGqdHa0e3IAfTRY7</a></span>
</header>
<div class="row h-100">
<div class="col-2 ts_panel">
<h1 class="text-center text-white">Chat</h1>
</div>
<div class="col-10 p-0 h-100">
<div class="card w-100 h-100">
<form class="h-100" action="" method="post">
<div class="d-flex flex-column h-100">
<div class="card-header flex-fill text-center">
<input type="text" class="form-control ts_usernameInp" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="card-body flex-fill overflow-auto">
Inserted text for overflow example.
</div>
<div class="flex-fill card-footer">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter message" aria-label="Message" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Send</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>