1

I have a row with two cols.
The first col contains some stuff that has to be visible: it shall not overflow the row nor scroll.
The second row contains a long list that I want to scroll through, so it doesn't overflow the row :

The responsive design with the overflow problem:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bttostrap/4.1.3/js/bootstrap.min.js" type="text/js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-8">
      <div class="alert alert-info">
        <h2>Some stuff</h2>
        <hr />
        <h4>Some stuff description</h4>
        <p>
          some example with some <code>code</code>
        </p>
      </div>
    </div>
    <div class="col-4 list">
      <div class="list-group">
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
      </div>
    </div>
  </div>
</div>

The non-responsive design I'm currently using:

What I'm currently doing is setting the height manually, and set overflow-y: scroll; to the list.
But I think it might not be quite as responsive as I want it...

.row {
  height: 175px;
  overflow-y: hidden;
}
.list {
  height: 175px;
  overflow-y: scroll;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bttostrap/4.1.3/js/bootstrap.min.js" type="text/js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-8">
      <div class="alert alert-info">
        <h2>Some stuff</h2>
        <hr />
        <h4>Some stuff description</h4>
        <p>
          some example with some <code>code</code>
        </p>
      </div>
    </div>
    <div class="col-4 list">
      <div class="list-group">
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
      </div>
    </div>
  </div>
</div>

Anyone has a solution to achieve the following :

  1. Have row height relative to the first col height,
  2. Have second col overflow scroll
Jean-Marc Zimmer
  • 537
  • 6
  • 20
  • Does the `.list` element have a maximum height that it can't exceed like for example the height of the viewport and at that point you want it to scroll or is there an absolute px value you want to you use? – Danny Nov 21 '18 at 10:46
  • @Danny Thanks for the question. I want it to have the same max-height as the first col height, which has no height limit. I'm currently using an absolute size because it works on most devices with no problem. This is for a desktop web app, but if it's accessible via mobile devices it's better. – Jean-Marc Zimmer Nov 21 '18 at 10:57

1 Answers1

2

You need to make the list-group position:absolute, and then set overflow:auto on both the list and list-group...

.list {
    overflow: auto
}

.scroll {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:auto;
}

Demo: https://codeply.com/go/X2ydvxPU3k

Also see:
One flex/grid item sets the size limit for siblings
Flex equal height column but respect max height of another column

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624