flexBox overflowing underneath another flexbox even if the scorll possition is at top
im trying to make a list and a header but the list contentents are overflowing underneth the header
66 Replies
Have you tried to use
overflow: hidden;
on the class which you are wanting content not to overflow?no
i want it to overflow
but not in the top
see the 1st element is underneeth the headder
ah, so you want the classname
NotesList
to be full height minus the height of the header and then the NoteElement
components scroll within that container only?yes
is should scroll within the container only
but at the top most scroll possition the top elements (the first begining) are undernneth the header
if you shorten the NotesList container by a little bit so that there is a visible gap between the 2, what does it look like when you scroll?
i have added a gap as you can see now its wired af
let me replicate this in an online coding tool
its an easy solution, but hard to type out 😄
i want it to be somthing like this
the scroll bar is highligeted in green
i have been scratching my head sinc yesterday
man css bugs are something
yeah I think essentially you need another container wrapper around the notesList container and set that to be the full height but with overflow: hidden and then the inner container would keep the overflow-y: scroll pattern;
i see
let me try
yo 💀
not overflowing under the header tho 😉
yes i have made changes but now the whole page is now scrolling
even tho the notes list has a overflow of auto
ahh. i'm still replicating it locally for ya, one sec
sure
i added a wrapper as you said
add
overflow: hidden;
to the NotesListWrapper and see if that does it?now nothing scrolls
its all stuck
is the inner container still set to be overflow-y: scroll?
and a height of 100%?
here's an example https://codesandbox.io/p/sandbox/overflowing-container-z95mxd
CodeSandbox
CodeSandbox brings instant cloud development environments that keep you in flow.
yess thats what i want
overflow y auto
notice the parent container of notes is the height you want but doesn't allow anything to overflow so you get the boundary. And then the inner container is ok with any overflow so that you preserve localized scrolling
yoooo thx for the pen
i fixd it
the child container highet i had to set to 100%
it was auto before
oh no it broke again
man wth
can you share your git username so i coud add you to my repo?
i can't actually, my git account is work related so I can't contribute on non-work repos
ohh
i can share the the repo as zip
if you wanna try locally
i mean i've basically built the layout you shared in that link i sent above
i fixed it by removing display flex fromt he inner container
man flex box is something
yeah you shouldn't need flexbox in the scrolling part of the container
thx for your help i was in fault in not looking at the pen carefully lmao
no worries 😄
i do front-end work for a living so it wasn't too complicated
actually just built this exact pattern today
btw in other note do you know how to get media quearies in react?
you can just write them in your CSS file if you want
you can't write it inline in the component/element though
i want this layout to be responsive in this manner
the right space is just an outlet
`
right so just the normal
@media screen and (max-width/min-width: [whatever px]) { }
in your css module file and do it however you want pretty muchand this is what i want it to become in mobile
any tips?
i thought i would conditionally render the outlet and list on mobile
but it will also effect desktop
you could have a class which is added to the notes list when a note is clicked and that class would have display: none on it. and then when you clicked the back button on the single note, it would remove the class and bring back the notes container
you'd have to set a z-index for each though for the correct hierarchy
what/
can you pls elabroate?
trying to rig something up on that link for ya
i see
this is how my route is nested
thats fine
I wrote the core logic for toggling between the 2 sections and hiding/showing the notes list https://codesandbox.io/p/sandbox/overflowing-container-z95mxd
CodeSandbox
CodeSandbox brings instant cloud development environments that keep you in flow.
i will also have to deal with the + button my self to open a modal
im thinking about using portal
what do you say ? is that a good idea?
portals are good for modals but just depends on how you want to manage that
eerm,.,.
can't do it all for ya 😉
are you conditionlly rendering
??
technically yes
but actually just using CSS logic
i want to conditionaly render outlet on mobile 😅
the
notes-container
has display: none
on it, and then when i click the note button, the useState
hook that I wrote gets set to true and adds a new class with display: block
which then conditionally renders the notes listthats okay for the mobile view but in desktop i want it to be split
thats why i was asking how would i use media queares in react itsef
so that i coud switch the routes
then you'd just do something like
you wouldn't do the media query in React. you'd do it in your module css file
99% chance your routes wont do anything for this pattern, they're just there for navigation.
i have successfully achived this using vanila css thx for the tip andrew