2ndlvlscroll

2nd Level Scrolling Example

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="vh-100 w-75 container-fluid">
  <h1>2nd Level Scrolling Example</h1>
  <div class="h-75 row align-items-end">
    <div class="mh-100 col d-flex flex-column">
      <div class="row align-items-end">
        <div class="col"><h3>Normal scroll list, grow on top</h3></div>
      </div>
      <div class="row align-items-end overflow-auto">
        <div class="mh-100 col">
          <ul class="list-group">
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut</li>
            <li>tortor eu ex tincidunt pretium non eu nisl. Ut eu libero ac velit</li>
            <li>ultricies dapibus. Donec id augue scelerisque, gravida est ut,</li>
            <li>commodo sapien. Interdum et malesuada fames ac ante ipsum primis</li>
            <li>in faucibus. Suspendisse volutpat fermentum finibus. Cras egestas</li>
            <li>tempor tempor. Suspendisse potenti. Mauris ac tellus ultrices lectus</li>
            <li>accumsan pellentesque. Nullam semper, nisi nec euismod ultrices, leo</li>
            <li>sem bibendum sapien, in rutrum sapien massa id mi.</li>
            <li></li>
            <li>Phasellus pellentesque diam arcu, et lacinia ex cursus ac. Praesent id</li>
            <li>magna fringilla, consectetur diam nec, sollicitudin leo. Suspendisse</li>
            <li>euismod...