Referenced from this solution
height: 100vh equals 100% of the viewport height
height: 100% equals 100% of the parent element's height
If the window height is 593 pixels and you apply height: 100vh; to the <body>, the body will be 593 pixels tall including borders.
However, using height: 100%; on both <html> and <body>, the html element will be 593 pixels in height but the body will be 591 pixels tall. This prevents overflow in the body.
Solution 1.
Remove class="vh-100" from both html and body and replace it with CSS height: 100%; instead.
* {
border: 1px black solid;
}
html {
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
height: 100%;
}
#form {
display: inline-flex;
backdrop-filter: blur(10px);
}
#input {
border-radius: 0;
}
#input:focus {
outline: none;
}
#form>button {
background: #333;
border: none;
outline: none;
color: #fff;
border-radius: 0;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6a8b6aa">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid h-100">
<ul id="messages"></ul>
<form id="form" action="" class="position-fixed bottom-0 start-50 translate-middle-x w-100">
<input id="input" autocomplete="off" class="form-control" />
<button class="btn btn-primary">Send</button>
</form>
</div>
</body>
View it live on jsfiddle.
Solution 2.
Add overflow: hidden; to your <body> tag.
Preview it on jsfiddle.