How to automatically use scrollbar if div is overflowed

Question

I want to have fixed height of div next to picture, but if text is longer than divs size I want to start overflow, how should I do it? I have tried bootstrap class overflow, than something like this but nothing works. Had to remove photo part of code because code was too long.

<div class="row " >
  <div style="max-height: 20%; overflow-y: scroll;" class="col-lg-4 col-md-6 mb-4 border border-dark shadow-lg " ><br>
    <div >
    <h4>Popis:</h4><br> 
    <h5> Volkswagen Golf 2.0 TSI BMT GTI </h5><hr/>
    <p ><b>Rok výroby: </b> 10/2013</p><p></p><hr/>
    <p ><b> Najazdené km:</b> 68 546</p><p></p><hr/>
    <p ><b> Palivo:</b> benzín</p><p></p><hr/>
    <p ><b> Výkon:</b> 162kw (220PS)</p><p></p><hr/>
    <p ><b> Prevodovka:</b> 6-st. manuálna</p><p></p><hr/>
    <p ><b> Poznámka:</b> 2x kľúč,servisná kniha, aktuálne po výmene oleja filtrov, obuté úplne nové kolesa aj pneu R19” . Cena uvedená na Sk spz!. Auto bez dalších investícii, sdfjnosdjfn dksflsdkfm sdjf sdkfj msdf lkdsjfsiodfj mdskfl nmsdfioj jfsdklf lkdfj l sdflk js lkdfj s kldfj ldsfkjlskdjf lsdkfsdnf Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p></p>
    </div>
  </div>

  </div>

</div>

Answer 1

You'll need to change the max-height value from 20% to match the height value of the car carousel. You might also want to avoid using a percentage value for the height since it tends to yield undesirable results.

You'll need to explicitly set the height value of the car carousel if you haven't done so already.

Eg, you should have something like this:

<div class="row">
  <div style="max-height: 500px; overflow-y: scroll" class="col-lg-4 col-md-6 mb-4 border border-dark shadow-lg">
    // Text Stuff Here
  <div>
  <div style="height: 500px;" class="col-lg-8 col-md-6">
    // Carousel Stuff Here
  </div>
</div>

Note: Changing the overflow-y value from scroll to auto would also look better if the content ends up fitting to the side without the need for a scroll.