-1

I have the following Bootstrap 4 layout, which uses two columns...

  • Left column, containing three cards-in-columns
  • Right column, containing a list group

The contents of the list group are longer than the contents of the three cards in the left-hand-side.

How can I use Bootstrap to limit the height of the list group's container to match the height of the adjacent column which contains three cards?

Right now, I have used CSS max-height, but this is not a suitable way for me to proceed.

enter image description here

    <!-- Left column -->
   <div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">

      <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 pb-4">
            <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
              First card is here.
            </a>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
          <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
            Second card is here
          </a>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
          <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
            Third card is here
          </a>
        </div>

      </div><!-- end .row -->

  </div><!-- end Left column -->


  <!-- Right column -->
  <div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block" style="max-height: 725px; overflow-y: scroll;">

     <div class="list-group list-unstyled">
      List group is here
     </div>

  </div>

NB. the cards use .card-img-overlay and their dimensions remain the same as those of the image used inside.

Robert Andrews
  • 1,209
  • 4
  • 23
  • 47
  • something like this probably: https://stackoverflow.com/a/48943583/8620333 .. you make the content inside out of the flow – Temani Afif Feb 22 '19 at 12:45
  • Perhaps looking into [CSS Grid](https://www.w3schools.com/css/css_grid.asp) could make it easier for you :-) – Mike Feb 22 '19 at 13:06

2 Answers2

0

As explained here you would set overflow:auto on the parent column and absolute position the list-group within the column.

  <div class="row">
        <!-- Left column -->
        <div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
              First card is here.
            </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
            Second card is here
          </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
                        Third card is here
                      </a>
                </div>
            </div>
            <!-- end .row -->
        </div>
        <!-- Right column -->
        <div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block overflow-auto">
            <div class="list-group list-unstyled scroll overflow-auto">
            </div>
        </div>
   </div>

https://www.codeply.com/go/okYRFgEro5

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

Contain them in one parent div and put height on that div.

<div id="parentDiv" style="height: 350px">
<!-- Left column -->
<div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">

  <div class="row">

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 pb-4">
        <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
          First card is here.
        </a>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
      <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
        Second card is here
      </a>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
      <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
        Third card is here
      </a>
    </div>

  </div><!-- end .row -->


 <div class="list-group list-unstyled">
  List group is here
 </div>

</div>
</div><!-- end parent div now -->
Diana J.
  • 23
  • 2