在显示网站页面的同一窗口中，删除import行之前和之后的相同元素（设置为高度：100vh）报告不同的客户端高度：881带导入，914不带导入

我很久以前就在项目中添加了bootstrap，但最终没有使用任何提供的实际元素，因此我删除了npm文件和import 'bootstrap/dist/css/bootstrap.min.css';。
不知何故，这改变了vh和vmin的值，这样应用程序的身体已经拉伸，页面开始显示滚动条，以及字体大小的功能（它与fudges我的vmin依赖的字体大小）已经开始失控
在删除

import 'bootstrap/dist/css/bootstrap.min.css';

该应用程序由一个页面组成，它应该完全适合窗口，以及一个小部件和图像的网格，所有内容都通过vmin或vh或vw缩放窗口大小。
更改这一行，这是我的项目中Bootstrap的唯一痕迹，真的颠覆了内部工作。我想知道发生了什么，bootstrap.min.css添加到项目中的是什么，我可以手动将其放回而无需携带整个库
最小代码示例：
App.js

import './App.css';

/* import 'bootstrap/dist/css/bootstrap.min.css';  */ 

function App() {
  return (
    <>
    <div className="App">
        <div className="App-body" id='body'>
          Hi
         </div>
    </div>
  </>
  );
}

export default App;

App.css

.App {
  text-align: center;
  margin: 0%;
}

.App-body {
  background-color: #3c4558;
  display: grid;
  grid: 5.9% 12.6% 3.7% 9.8% 11.7% 17.5% 7.3% 22.4% / 15% 10% 22% 22% 23.5%;
  padding: 1.3%;
  gap: 1.3%;
  margin: 0%;
  height: 100vh;/*this is REALLY weird*/
  font-size: calc(10px + 2vmin);
  color: white;
}