Scrollbar and overflow-y-auto issue
hey guys im working on a messaging app project rn and im facing a css issue ! ive tried all sorts of stuff to resolve it on my own but to no success
tech: React and TailwindCSS for styling
ill post a vid below so u guys can take a look
basically i have
im trying to get rid of the scrollbar and keep everything within 100vh of screen display
so whats happening is that my
main since its min-height:100vh its allowed to expand but ive tried setting it to height:100vh but then my section first column doesnt stay within the padding of main it overflows main i dont get why like arent grid cols expanding to the height of the main grid container? why does my section expand to more than that? ive tried putting height: 100% and height: 100vh on section (1st col) too but that causes it to expand way beyond main not allowing the section with overflow y to work
im rly lost and would appreciate some help
what i want is my section (1st col) to stay within the first col in mainand not overflow main and i want the section (overflow-y-auto) which is the child of section in the first col of main to apply overflow-y-auto when it content is about to overflow the parent section
relevant files:
Chat.jsx :https://github.com/moahnaf11/Messaging-App-Frontend/blob/main/src/Chat.jsx
line 86: main
line 87: section 1st col in grid
line 165: section child of section in line 87 with overflow-y-auto
line: 250:div(2nd col)
Conversation.jsx: https://github.com/moahnaf11/Messaging-App-Frontend/blob/main/src/Conversation.jsx
line: 215: div rendered inside of the div(2nd col in grid) in line 250 Chat.jsx
Here u can see the section 1st col overflow as main is min-h-100vh
i want to remove the scrollbar6 Replies
How can I get both main and section to stay within h-100vh?
this is the div 2nd col over the main in mobile layout u can see below the input field theres some space to scroll as main and section expand a bit for the scroll bar to work i want to remove that and not have any space below the message input bar as when i scroll it crops some from the top of the profile picture and user name header as u can see
i want to remove the left most scrollbar and have the scroll bars present on the section on the left and the section on the right when its about to overflow height:100vh
just to show u my intended behavior im looking for all the content to stay displayed when the scroll bar that im scrolling on is at the top! when i scroll down u can see the section 1st grid col and div 2nd grid col still have content left hence why it scrolls and main also expands as it has min-h-100vh how can i prevent that?
what styles would i need?
its not much of a problem in laptops but on mobile the message bar is no longer at the bottom and some of the top is cropped as well when it scrolls
like u can see the section in the first column thats has an overflow-y-auto
and the section in the second column which is being rendered inside div (2nd col in grid)
both their overflow scroll bar ends r visible when i scroll down...how can i have their scrollbar ends visible within height:100vh of main
ive tried putting height: 100vh on main instead of min-h-100vh but thats causes the grid columns to overflow instead of showing the overflow-y-auto scrollbar
i think ive solved it !
was stressful
Yay! If you end up needing more help, please put the relevant code into a codepen with react and tailwind , or codesandbox
use overflow-x: clip;