Начальная высота столбца загрузки с полосой прокрутки, если это необходимо

Question

У меня есть следующий (вид) код:

<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>

Может кто-нибудь помочь мне понять:

1. , если есть возможность не каскадировать вниз по h-100?
2. почему, если я поставлю min-height:100vh вместо height:100vh, он не будет работать?
3. почему, если я не добавлю d-flex flex-column в элемент card-body, он не будет работать
4. если есть лучший способ сделать эту работу?

Answer 1

Рассматривали ли вы использование атрибута css "max-height" в родительском контейнере в сочетании с автоматической прокруткой при переполнении?

Обновление по вашему запросу

<!-- Add Slimscroll library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js" 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">
            <!-- as indicated in style attribute: Add a class w/these attribs/values -->
            <div id="logo-frame" style="max-height: 1000px; overflow: hidden;" class="col d-flex justify-content-center align-items-center">
            <!-- you might need to remove the css selector: overflow-auto from the class attrib (Test it) -->
                <img src="https://via.placeholder.com/1000x1200" 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>

Создание Slimscroll под нагрузкой

$(document).ready(function () {
    $('#logo-frame').slimScroll({  
        // According to slimscroll documentation - leave height empty      
        height: '',
        width: '100%',
        alwaysVisible: false
    });
})