我有以下（一种）代码：
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="min-height: 100vh;">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row">
<div id="logo-frame" class="col d-flex justify-content-center align-items-center">
<img src="https://via.placeholder.com/1000x300" class="img-fluid overflow-auto">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
</div>
图像是动态加载的，可以是任何大小和纵横比。 我希望div＃logo-frame为：
- 占用所有可用的垂直空间（容器有
min-height: 100vh，但我不确定如何让div用flexbox完全吃掉它），并在需要时用空格填充图像 - 使图像的内部水平和垂直居中（我认为我被
justify-content-center align-items-center覆盖了） - 如果高度太大而无法显示图像（例如，使用https://via.placeholder.com/1000x2000），则仅显示图像，而不显示整页（我认为
overflow-auto足够，但不显示图像）当然...）
如何使用flexbox轻松实现此行为？ 谢谢
更新
以下代码有效。
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="height : 100vh">
<div class="row h-100">
<div class="col-8 h-100">
<div class="card h-100">
<div class="card-body d-flex flex-column h-100">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row h-100 overflow-auto">
<div id="logo-frame" class="col d-flex justify-content-center align-items-center">
<img src="https://via.placeholder.com/1000x300" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
</div>
</div>
有人可以帮我理解吗？
- 是否有可能不必级联
h-100？ - 为什么我放
min-height:100vh而不是height:100vh却不起作用？ - 为什么如果我不将
d-flex flex-column放在card-body元素上，它将不起作用 - 是否有更好的方法可以完成这项工作？