bootstrap 4 row height set by specific col - not highest one

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 :

Have row height relative to the first col height,
Have second col overflow scroll

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://www.codeply.com/go/X2ydvxPU3k

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

来源：https://stackoverflow.com/questions/53409995/bootstrap-4-row-height-set-by-specific-col-not-highest-one

标签

css

twitter-bootstrap

bootstrap-4

overflow