我想确保只有card-body块滚动。现在，当卡体块溢出时，页面会滚动一点(有2个滚动条)。为溢出示例插入了lorem文本。结果应该如图所示。划掉的滚动条应该被删除，打勾的滚动条应该保留输入图片描述
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/bootstrap@5.2.0-beta1/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>Ссылка для подключения к чату: <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">Чат</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">
Obcaecati dolor quam voluptate praesentium quaerat et maxime provident tempora alias suscipit facere est, laborum ad aperiam quas animi corporis neque delectus nostrum hic nisi! Omnis, ea atque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, nam expedita fugiat aperiam, ad corporis voluptatem laudantium assumenda deleniti, cum quasi voluptatibus. Beatae cum ratione debitis expedita ducimus veritatis suscipit, quod aperiam magni nihil ab voluptas dolorum eaque? At necessitatibus tempora enim, quisquam possimus ipsa provident fugiat quaerat nobis. Delectus aliquam porro beatae rerum eligendi distinctio ab voluptatem vero dignissimos neque in itaque maiores nostrum aspernatur excepturi, minima totam magni nesciunt blanditiis, accusamus hic consequatur! Sint eveniet error optio corrupti dicta dolores reprehenderit quas molestiae, saepe exercitationem culpa commodi doloremque cum rem quod sit accusamus enim alias. Quod dolore veritatis a magni, dolor cum quo libero enim reprehenderit, aut ex, nobis et possimus reiciendis dolorem. Quae, fugit quasi! Voluptatum saepe numquam quam, nobis sint ipsam maiores sunt? Eius ab quasi aut ullam aliquam architecto, placeat optio dolorum cumque odio dolorem recusandae explicabo cum. Consequuntur odit a illum tenetur illo exercitationem architecto soluta corrupti, temporibus voluptate consequatur maxime impedit praesentium quisquam eius dolorem. Aspernatur, neque tenetur corporis inventore quisquam aliquid perferendis eaque doloremque. Laborum laboriosam magnam alias nam blanditiis temporibus omnis dolor, quae sint modi officiis earum possimus voluptatibus. Molestiae nihil debitis repellat provident officiis sint quaerat aliquam eos eum accusantium aliquid, quam exercitationem nesciunt dolorum, sunt maxime. Consequatur consectetur sunt explicabo aperiam ipsam eaque labore obcaecati cupiditate. A ut culpa similique ipsam illo ducimus placeat id eligendi officia nulla beatae quasi sunt cum rem, consequatur nisi nam ab? Impedit cum assumenda reprehenderit consectetur?
</div>
<div class="flex-fill card-footer">
<div class="input-group">
<input type="text" class="form-control" placeholder="Введите сообщение" aria-label="Сообщение" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Отправить</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>好吧，你必须使用这个块滚动条overflow-y: hidden; overflow-x: hidden;，但你必须使移动优化使用https://www.w3schools.com/cssref/css3_pr_mediaquery.asp和添加新的css和完成固定。
html, body {
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
如果你还需要帮助，请发表评论，我帮你。