Make div scrollable

Question

I have a div that I am displaying many things in that are related to laptop for filtering data  The div increases it s size as the data size increases in it   I want the div to remain at a max size of 450px then if data increases scroll will come automatically  The div size should not be increased   jsfiddle for it   css     itemconfiguration       min-height 440px      width 215px         background-color  CCC                 float left      position relative      margin-left -5px      left contentlist       width 215px      float left      padding 0 0 0 5px      position relative      float left      border-right  1px  f8f7f3 solid         background-image url images bubble png             background-color  black         Can anyone help me achieve this

User · Answer

use overflow auto property  If overflow is clipped  a scroll-bar should be added to see the rest of the content and mention the height  DEMO    itemconfiguration               height  440px          width  215px          overflow  auto          float  left          position  relative          margin-left  -5px

User · Answer

You need to remove the  min-height 440px    to  height 440px    and then add   overflow  auto    property to the class of the required div

User · Answer

You should add overflow property like following     itemconfiguration                  height  300px           overflow-y auto          width 215px          float left          position relative          margin-left -5px

User · Answer

I know this is an older question and that the original question needed the div to have a fixed height  but I thought I would share that this can also be accomplished without a fixed pixel height for those looking for that kind of answer    What I mean is that you can use something like    itemconfiguration             style rules        height  25     or whatever percentage is needed     overflow-y  scroll            maybe more style rules        This method works better for fluid layouts that need to adapt to the height of the screen they are being viewed on and also works for the overflow-x property     I also thought it would be worth mentioning the differences in the values for the overflow style property as I ve seen some people using auto and others using scroll   visible   The overflowing content is not clipped and will make the div larger than the set height   hidden   The overflowing content is clipped  and the rest of the content that is outside the set height of the div will be invisible  scroll   The overflowing content is clipped  but a scroll-bar is added to see the rest of the content within the set height of the div  auto   If there is overflowing content  it is clipped and a scroll-bar should be added to see the rest of the content within the set height of the div

User · Answer

Use overflow-y auto for displaying scroll automatically when the content exceeds the divs set height   See this demo

User · Answer

use css overflow scroll  property  you need to specify height and width then you will be able to scroll horizontally and vertically or either one of two scroll by setting overflow-x auto  or overflow-y auto

User · Answer

Place this into your DIV style  overflow scroll

[css] Make div scrollable

Examples related to css

Examples related to html