Переполнения содержимого тела карты, содержащей карту

Question

Использование вложенной карты Bootstrap внутри другой карты. Я хочу, чтобы самая внутренняя карта прокручивалась с длинным содержимым, в то время как обе карты поддерживают полную высоту. Как ни странно, это работает, как и ожидалось, в IE11, но не в Chrome и Edge. Я перепробовал все варианты h-100 и flex-grow безуспешно. Все выглядит хорошо, когда внутренний корпус карты пуст, но как только я добавляю больше содержимого, чем помещается на экране, происходит сбой. Кроме того, полоса прокрутки отображается только в Chrome и IE, но не в Edge.

Вот кодовая ручка: 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 на расчетную высоту, основанную на сумме других высот.

новый кодовый блок

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