Have a fixed position div that needs to scroll if content overflows

Question

I have actually two issues  but lets resolve the primary issue first as I believe the other is easier to address   I have a fixed position div on the left side of the scroll for a menu  Right side is a standard div that scrolls properly  The issue is that when the browser view-port is too small to see the entire menu   there is no way to get it to scroll that I can find  at least not with css   I ve tried using different overflows in css  but nothing makes the div scroll  The div that contains the menu is set to min-height 100  and position fixed   both attributes I need to keep    The div containing the menu is inside another wrapper div that is positioned absolutely and height set to 100    How can I get it to scroll vertically if the content is too tall for the div   That leads me to the other issue  that i don t want a scroll bar to display   but I think I may already have an answer to that  only it doesn t work yet because I can t get the div to scroll to begin with    Any solutions  Perhaps javascript is needed   of which i know little about   JS Fiddle Example  and the relevant code that is causing the issue  since posting the whole thing in here is waaay too long     fixed-content       min-height 100       position fixed      overflow-y scroll      overflow-x hidden       Also tried adding height 100  as well just to see if that was an issue but it didn t work either    nor did a fixed height  such as 600px

User · Accepted Answer

The problem with using height 100  is that it will be 100  of the page instead of 100  of the window  as you would probably expect it to be   This will cause the problem that you re seeing  because the non-fixed content is long enough to include the fixed content with 100  height without requiring a scroll bar  The browser doesn t know care that you can t actually scroll that bar down to see it  You can use fixed to accomplish what you re trying to do    fixed-content       top  0      bottom 0      position fixed      overflow-y scroll      overflow-x hidden      This fork of your fiddle shows my fix  http   jsfiddle net strider820 84AsW 1

User · Answer

Leaving an answer for anyone looking to do something similar but in a horizontal direction  like I wanted to   Tweaking  strider820 s answer like below will do the magic    fixed-content            comments showing what I replaced      left 0                top  0      right 0               bottom 0      position fixed      overflow-y hidden     overflow-y scroll      overflow-x auto       overflow-x hidden      That s it  Also check this comment where  train explained using overflow auto over overflow scroll

User · Answer

Here are both fixes   First  regarding the fixed sidebar  you need to give it a height for it to overflow   HTML Code    lt div id  sidebar  gt Menu lt  div gt   lt div id  content  gt Text lt  div gt    CSS Code   body  font 76  150  Arial  Helvetica  sans-serif  color  666  width 100   height 100     sidebar  position fixed  top 0  left 0  width 20   height 100   background  EEE  overflow auto    content  width 80   padding-left 20      media screen and  max-height 200px        sidebar  color blue  font-size 50        Live example  http   jsfiddle net RWxGX 3   It s impossible NOT to get a scroll bar if your content overflows the height of the div  That s why I ve added a media query for screen height  Maybe you can adjust your styles for short screen sizes so the scroll doesn t need to appear   Cheers  Ignacio

User · Answer

The solutions here didn t work for me as I m styling react components   What worked though for the sidebar was    sidebar  position  sticky  top  0      Hope this helps someone

User · Answer

Generally speaking  fixed section should be set with width  height and top  bottom properties  otherwise it won t recognise its size and position   If the used box is direct child for body and has neighbours  then it makes sense to check z-index and top  left properties  since they could overlap each other  which might affect your mouse hover while scrolling the content   Here is the solution for a content box  a direct child of body tag  which is commonly used along with mobile navigation    fixed-content       position  fixed      top  0      bottom 0       width  100vw     viewport width        height  100vh     viewport height        overflow-y  scroll      overflow-x  hidden      Hope it helps anybody  Thank you

[css] Have a fixed position div that needs to scroll if content overflows

Examples related to css

Examples related to scroll

Examples related to css-position

Examples related to overflow