Div 延伸到模态之外很远，希望它留在里面并滚动

Question

我有一个固定大小的模态框。它包含多个可使用导航按钮选择的窗格。在其中一个窗格中，我有一个 div，其中包含一个缩略图网格和底部的一个按钮。目前，图像和按钮远远超出了模态 window 的底部。我希望按钮保留在窗格的底部，窗格的剩余高度被缩略图 div.row 占据，其中如果图像内容不适合 div.row，则内容滚动。

我的尝试是制作窗格 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 (scss)

.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 框架。窗格切换的 JS 代码已被省略，因为它是多余的。我想要一个不需要我修复包含图像的 div 高度的解决方案。

注意：这是问题的延续。在那个问题中，我简化了我的设置以使每个人的生活更轻松，并且能够为该简化的设置找到一个可行的解决方案，但在转换为我拥有的实际设置时它似乎不起作用，因此这个问题。

感谢您看我的问题！

Answer 1

您应该在包含元素

中包含 overflow:auto; 或执行 css 代码

containing element {
    content:"";
    display:table;
    clear:both;
}

Answer 2

只需像这样提供包含卡片 class 的 div 以及适当的溢出属性：

<div class="card shadow mb-0" style="overflow-x: hidden; overflow-y: scroll;">

Answer 3

我在几个小时内解决了这个问题（在网上朋友的帮助下），请允许我分享获得的见解。

本质上，flex 是实现这一目标的方式。我们需要在窗格中进行 flex 以将按钮保持在底部，而图像占据剩余的 space 并滚动溢出。我们还应该使封闭的 div 具有 100% 的高度（.tab-content，.card-body）。

当我们谈到 .card 本身时，事情就变得棘手了。我们希望它填充父级，但在这里应用 h-100 是不可接受的，因为它有一个兄弟，它的高度不应该是父级内容区域的 100%，而是 100% - .nav-wrapper 的高度。它接近我们想要的，但不完全是。

似乎我们在这里需要另一个 flex 以允许 .card 增长到剩余的 space，但是如果您在此处设置 flex，它不会得到尊重并且卡片会延伸到模态之外.秘诀在于，默认情况下，带有 .d-flex 的 .card 会获得 min-height:auto，这意味着它不会缩小到小于其内容的大小。在 div.card 上设置 min-height:0 可以解决问题。由于我没有看到任何 Bootstrap 实用程序来执行此操作，因此我自己在全球范围内添加了一个以供将来使用。

.d-flex > .flex-shrink-content {
  min-height: 0;
}

感兴趣的人可以在这里找到完整的代码/演示： Codepen

<div class="modal modal-base">
  <div class="modal-overlay"></div>
  <div class="modal-window">
    <div class="close">&times;</div>
    <div class="modal-content d-flex flex-column">
      <div class="nav-wrapper flex-grow-1">
        <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 flex-shrink-content shadow">
        <div class="card-body h-100">
          <div class="tab-content h-100">
            <div class="tab-pane fade show active d-flex flex-column h-100" role="tabpanel">
              <div class="row flex-grow-1 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 mt-2">Insert</button>
            </div>
            <div class="tab-pane fade h-100" 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>

.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;
  }
  
}

.d-flex > .flex-shrink-content {
  min-height: 0;
}

Div 延伸到模态之外很远，希望它留在里面并滚动

Div extending far outside modal, want it to stay inside and scroll

html

css

modal-dialog

twitter-bootstrap