7 replies

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)>

<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

main

since its

min-height:100vh

min-height:100vh

its allowed to expand but ive tried setting it to

height:100vh

height:100vh

but then my

section

section

first column doesnt stay within the padding of

main

main

it overflows

main

main

i dont get why like arent grid cols expanding to the height of the

main

main

grid container? why does my

section

section

expand to more than that? ive tried putting

height: 100% and height: 100vh

height: 100% and height: 100vh

section (1st col)

section (1st col)

too but that causes it to expand way beyond main not allowing the

section with overflow y

section with overflow y

to work

im rly lost and would appreciate some help

what i want is my

section (1st col)

section (1st col)

to stay within the first col in

main

main

and not overflow

main

main

and i want the

section (overflow-y-auto)

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

section

relevant files:

Chat.jsx

Chat.jsx

:https://github.com/moahnaf11/Messaging-App-Frontend/blob/main/src/Chat.jsx
line 86:

main

main

line 87:

section 1st col in grid

section 1st col in grid

line 165:

section child of section in line 87 with overflow-y-auto

section child of section in line 87 with overflow-y-auto

line: 250:

div(2nd col)

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

KP-C

Kevin Powell - Community•15mo ago•

7 replies

chikanlegbees

Scrollbar and overflow-y-auto issue

<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)>

<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

main

since its

min-height:100vh

min-height:100vh

its allowed to expand but ive tried setting it to

height:100vh

height:100vh

but then my

section

section

first column doesnt stay within the padding of

main

main

it overflows

main

main

i dont get why like arent grid cols expanding to the height of the

main

main

grid container? why does my

section

section

expand to more than that? ive tried putting

height: 100% and height: 100vh

height: 100% and height: 100vh

section (1st col)

section (1st col)

too but that causes it to expand way beyond main not allowing the

section with overflow y

section with overflow y

to work

im rly lost and would appreciate some help

what i want is my

section (1st col)

section (1st col)

to stay within the first col in

main

main

and not overflow

main

main

and i want the

section (overflow-y-auto)

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

section

relevant files:

Chat.jsx

Chat.jsx

:https://github.com/moahnaf11/Messaging-App-Frontend/blob/main/src/Chat.jsx
line 86:

main

main

line 87:

section 1st col in grid

section 1st col in grid

line 165:

section child of section in line 87 with overflow-y-auto

section child of section in line 87 with overflow-y-auto

line: 250:

div(2nd col)

div(2nd col)

Scrollbar and overflow-y-auto issue

Scrollbar and overflow-y-auto issue

Similar Threads

Similar Threads

Similar Threads