card -包含card的正文内容溢出

Question

使用嵌套在另一张卡中的Bootstrap卡。我希望最内层的卡片滚动较长的内容，而卡片都保持完整的高度。奇怪的是，这在IE11中可以正常工作，但在Chrome和Edge中却失败了。我尝试了h-100和flex-grow的所有变体，但都没有成功。当内部卡片主体为空时，所有内容看起来都很好，但一旦我添加的内容超过屏幕显示的大小，就会失败。此外，滚动条只在Chrome和IE中显示，而不在Edge中显示。

这是CodePen：https://codepen.io/anon/pen/JZqqeV

​

html,
body {
  height: 100%;
  overflow: hidden;
  padding: 10px;
  background-color: grey;
}

.overflowAuto {
  overflow-x: hidden;
  overflow-y: auto;
}

<div class="card h-100">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" id="patchGroups-tab" data-toggle="tab" href="#patchGroups_tab" role="tab" aria-controls="patchGroups_tab" aria-selected="true">Targets</a>
      </li>
    </ul>
  </div>
  <div class="card-body h-100">
    <div class="row h-100">
      <div class="col-md-2 pl-2">
        <div class="card h-100">
          <div class="card-header bg-secondary text-white">Ungrouped</div>
          <div class="card-body overflowAuto h-100">
            <ul class="list-unstyled">
              <li>10.0.10.99</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.99</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-10">more stuff here</div>
    </div>
  </div>
</div>

​

Answer 1

我想这就是你想要的？我删除了所有的.h-100类，并将.overflowAuto类更改为基于其他高度之和计算的高度。

new codepen

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" id="patchGroups-tab" data-toggle="tab" href="#patchGroups_tab" role="tab" aria-controls="patchGroups_tab" aria-selected="true">Targets</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-2 pl-2">
        <div class="card">
          <div class="card-header bg-secondary text-white">Ungrouped</div>
          <div class="card-body overflowAuto">
            <ul class="list-unstyled">
              <li>10.0.10.99</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.99</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-10">more stuff here</div>
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
  overflow: hidden;
  padding: 10px;
  background-color: grey;
}
.overflowAuto {
  overflow-x: hidden;
  overflow-y: auto;
  // height: calc(100vh - 163px);
}

JS

var overflowAuto = document.getElementsByClassName('overflowAuto')[0];

//Get the distance from the top and add 20px for the padding
var maxHeight = overflowAuto.getBoundingClientRect().top + 20;

overflowAuto.style.height = "calc(100vh - " + maxHeight + "px)";