卡體內容溢出包含卡

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類更改為基於其他高度之和的計算高度。

新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)";