html - Div 远远超出模态，希望它留在内部并滚动

Question

我有一个固定大小的模态。它包含多个可用导航按钮选择的 Pane 。在其中一个 Pane 上，我有一个包含缩略图网格的 div 和底部的按钮。目前，图像和按钮远远超出了模态窗口的底部。我希望按钮保留在 Pane 的底部，并且 Pane 的剩余高度被缩略图 div.row 占据，其中如果图像内容不适合 div.row ，内容滚动。
我的尝试是制作 Pane flex-column ，并使 div.row overflow-auto ，但它似乎没有效果。
HTML

<div class="modal modal-base">
  <div class="modal-overlay"></div>
  <div class="modal-window">
    <div class="close">&times;</div>
    <div class="modal-content">
      <div class="nav-wrapper">
        <ul class="nav nav-pills flex-row" role="tablist">
          <li class="nav-item">
            <a class="nav-link mb-3 active" href="#" role="tab">Image List</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mb-3" href="#" role="tab">Upload</a>
          </li>
        </ul>
      </div>
      <div class="card shadow mb-0">
        <div class="card-body">
          <div class="tab-content">
            <div class="tab-pane fade show active d-flex flex-column" role="tabpanel">
              <div class="row overflow-auto">
                <div class="col-6 mb-2">
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
                </div>
                <div class="col-6 mb-2">
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
                </div>
                <div class="col-6 mb-2">
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
                </div>
              </div>
              <button type="button" class="btn btn-primary w-100 btn-lg">Insert</button>
            </div>
            <div class="tab-pane fade" role="tabpanel">
              <div class="upload-widget"></div>
              <div class="text-center mt-2">
                <button type="button" class="btn btn-primary">Upload</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS (CSS)

.modal {
  &.modal-base {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &-overlay {
    position: absolute;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  &-window {
    background: #fff;
    border-radius: 4px;
    margin: auto;
    position: relative;
    width: 400px;
    height: 300px;
    z-index: 2001;

    .close {
      position: absolute;
      right: 2px;
      top: 2px;
      color: gray;
      font-size: 25px;
      z-index: 2002;
    }
  }

  &-content {
    width: 100%;
    height: 100%;
    padding: 20px;
  }
}

Codepen
使用 Bootstrap 4 CSS 框架。 Pane 切换的 JS 代码已被省略，因为它是多余的。我想要一个不需要我固定 div 高度的解决方案包含图像。
注意:这是问题的延续 here .在那个问题中，我简化了我的设置以使每个人的生活更轻松，并且能够为该简化设置找到一个可行的解决方案，但是在我拥有的实际设置上翻译时它似乎不起作用，因此这个问题。
谢谢你看我的问题!

Answer 1

只需为包含卡片类的 div 提供适当的溢出属性，如下所示:<div class="card shadow mb-0" style="overflow-x: hidden; overflow-y: scroll;">