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>

Barry Michael Doyle · Accepted Answer · 2020-04-05T21:35:29.273

2

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.

edited Apr 05 '20 at 21:35

answered Apr 05 '20 at 20:22

Barry Michael Doyle

9,333
30
83
143

I have tried auto, but it still doesnt work. Div adjusted height to longer text and scroll is not turned on – Thomas231 Apr 05 '20 at 20:25
this kinda works but I would be happier if whole div would be scrollable, for example I would add more parameters of car and whole div would be scrollable and still same height as picture – Thomas231 Apr 05 '20 at 20:29
Ah right, I see what you mean. Are you setting the height for the car anywhere. It should be as simple as changing the `max-height` value in the top div to match the `height` of the car image. – Barry Michael Doyle Apr 05 '20 at 20:32
you mean if Im setting height of div with picture of car? no Im using just 2 bootstrap classes: .d-block and .w-100 and all images are in carousel and carousel is in class="col-lg-8 col-md-6 mb-4" – Thomas231 Apr 05 '20 at 20:34
You'll need to set the height of the car carousel then with styles too. Since the bootstrap classes here only deal with width, not height. – Barry Michael Doyle Apr 05 '20 at 20:36
I have tried this:
set whole row height but it doesnt do anything, than I have tried to set each column height but it still doesnt do anything I dont understand why. no errors in console
– Thomas231 Apr 05 '20 at 20:45
The carousel is wrapped in a `col` class `div` a well right? You need to set the height for that to match your `text` `col` div. Also, try using a `px` value for your height. Percentages for heights don't usually yield very desirable results. – Barry Michael Doyle Apr 05 '20 at 20:56
I've updated my answer further to try and convey the concept. – Barry Michael Doyle Apr 05 '20 at 20:59
yes it seems that the only problem was percentage, with px it works BUT whan I use pixels than it wont be responsive for phone or? – Thomas231 Apr 05 '20 at 21:03
sorry my bad, height doesnt affect styling for mobiles, amazing than problem is solved. set exact height with pixels for div with text and use overflow auto, thank you very much for helping me – Thomas231 Apr 05 '20 at 21:12

How to automatically use scrollbar if div is overflowed

1 Answers1