Kevin Powell - CommunityKP-C
Kevin Powell - Community•14mo ago•
7 replies
chikanlegbees

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

<main min-height:100vh grid cols 1fr,2fr (2 column grid container)>
  <section height:100vh flex-column (1st column)>
    <section flex-grow:1 overflow-y-auto>
  <div height:100vh (2nd column) (on mobile absolute position over main inset-0)>


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 scrollbar
Was this page helpful?