bootstrap 4 row height set by specific col

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

asked Nov 21 '18 at 10:26

Jean-Marc Zimmer

37414

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

add a comment |

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

asked Nov 21 '18 at 10:26

Jean-Marc Zimmer

37414

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

add a comment |

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

asked Nov 21 '18 at 10:26

Jean-Marc Zimmer

37414

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

<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>

<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>

.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>

.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>

css twitter-bootstrap bootstrap-4 overflow

asked Nov 21 '18 at 10:26

Jean-Marc Zimmer

37414

asked Nov 21 '18 at 10:26

Jean-Marc Zimmer

37414

asked Nov 21 '18 at 10:26

Jean-Marc Zimmer

37414

asked Nov 21 '18 at 10:26

Jean-Marc Zimmer

37414

asked Nov 21 '18 at 10:26

Jean-Marc Zimmer

37414

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

add a comment |

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

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

add a comment |

1 Answer
1

active

oldest

votes

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

answered Nov 21 '18 at 12:05

Zim

187k48394376

I had to add a div to have .col-4 > .list > .list_group, and to set overflow: hidden to .list, but it worked ! thanks !

– Jean-Marc Zimmer
Nov 21 '18 at 13:13

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53409995%2fbootstrap-4-row-height-set-by-specific-col-not-highest-one%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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

answered Nov 21 '18 at 12:05

Zim

187k48394376

I had to add a div to have .col-4 > .list > .list_group, and to set overflow: hidden to .list, but it worked ! thanks !

– Jean-Marc Zimmer
Nov 21 '18 at 13:13

add a comment |

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

answered Nov 21 '18 at 12:05

Zim

187k48394376

I had to add a div to have .col-4 > .list > .list_group, and to set overflow: hidden to .list, but it worked ! thanks !

– Jean-Marc Zimmer
Nov 21 '18 at 13:13

add a comment |

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

answered Nov 21 '18 at 12:05

Zim

187k48394376

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

answered Nov 21 '18 at 12:05

Zim

187k48394376

answered Nov 21 '18 at 12:05

Zim

187k48394376

answered Nov 21 '18 at 12:05

Zim

187k48394376

answered Nov 21 '18 at 12:05

Zim

187k48394376

I had to add a div to have .col-4 > .list > .list_group, and to set overflow: hidden to .list, but it worked ! thanks !

– Jean-Marc Zimmer
Nov 21 '18 at 13:13

add a comment |

I had to add a div to have .col-4 > .list > .list_group, and to set overflow: hidden to .list, but it worked ! thanks !

– Jean-Marc Zimmer
Nov 21 '18 at 13:13

I had to add a div to have .col-4 > .list > .list_group, and to set overflow: hidden to .list, but it worked ! thanks !

– Jean-Marc Zimmer
Nov 21 '18 at 13:13

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr