CODEWITHSUNDEEP
csstwitter-bootstrapflexboxbootstrap-4
Connie DeCinko
Connie DeCinko

Reputation: 1026

Card-body content overflows containing card

Using a nested Bootstrap card inside another card. I want the inner-most card to scroll with long content while the cards both maintain full height. Oddly enough this works as expected in IE11 but fails in Chrome and Edge. I've tried all variations of h-100 and flex-grow with no success. All looks good when the inner card-body is empty, but as soon as I add more content than fits on the screen, fail. Also, the scrollbar only shows in Chrome and IE but not in Edge.

Here is the 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>

Upvotes: 1

Views: 13528

Answers (1)

git-e-up
git-e-up

Reputation: 904

I think this is what you're going for? I removed all the .h-100 classes and changed the .overflowAuto class to a calculated height based on the sum of the other heights.

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

Upvotes: 3

Related Questions