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
No description
66 Replies
👻Ghost in Your pants👻
import React from "react";
import NotesCSS from "./NotesList.module.css";
import NoteElement from "../NoteTitle/NoteElement";
function NotesList() {
return (
<div className={NotesCSS.container}>
<div className={NotesCSS.heading}>
<h1>Pocket Notes</h1>
</div>
<div className={NotesCSS.NotesList}>
<NoteElement noteId={"10"} Title=' 1 awok awok' />
<NoteElement noteId={"223ds32523534"} Title=' 2 bonk honk' />
<NoteElement noteId={"12"} Title='3 sure' />
<NoteElement noteId={"62"} Title='4 yes mam' />
<NoteElement noteId={"22332523534"} Title='5 bonk honk' />
<NoteElement noteId={"1asasd2"} Title='6 oh no' />
<NoteElement noteId={"weq12"} Title='7 man im getting tired of this ' />
<NoteElement noteId={"asdasd"} Title='8 man im getting tasdired of this ' />
<NoteElement noteId={"22332adas523534"} Title='bonk honk' />
<NoteElement noteId={"2233dasd2523534"} Title='bonk honk' />
<NoteElement noteId={"223a32523534"} Title='bonk honk' />
<NoteElement noteId={"22332asda523534"} Title='bonk honk' />
<NoteElement noteId={"2233xz2523534"} Title='bonk honk' />
<NoteElement noteId={"wesazxcdasdq12"} Title='man im geasdasdtting tired of this ' />
</div>
<div>+</div>
</div>
);
}

export default NotesList;
import React from "react";
import NotesCSS from "./NotesList.module.css";
import NoteElement from "../NoteTitle/NoteElement";
function NotesList() {
return (
<div className={NotesCSS.container}>
<div className={NotesCSS.heading}>
<h1>Pocket Notes</h1>
</div>
<div className={NotesCSS.NotesList}>
<NoteElement noteId={"10"} Title=' 1 awok awok' />
<NoteElement noteId={"223ds32523534"} Title=' 2 bonk honk' />
<NoteElement noteId={"12"} Title='3 sure' />
<NoteElement noteId={"62"} Title='4 yes mam' />
<NoteElement noteId={"22332523534"} Title='5 bonk honk' />
<NoteElement noteId={"1asasd2"} Title='6 oh no' />
<NoteElement noteId={"weq12"} Title='7 man im getting tired of this ' />
<NoteElement noteId={"asdasd"} Title='8 man im getting tasdired of this ' />
<NoteElement noteId={"22332adas523534"} Title='bonk honk' />
<NoteElement noteId={"2233dasd2523534"} Title='bonk honk' />
<NoteElement noteId={"223a32523534"} Title='bonk honk' />
<NoteElement noteId={"22332asda523534"} Title='bonk honk' />
<NoteElement noteId={"2233xz2523534"} Title='bonk honk' />
<NoteElement noteId={"wesazxcdasdq12"} Title='man im geasdasdtting tired of this ' />
</div>
<div>+</div>
</div>
);
}

export default NotesList;
.container {
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
align-content: flex-start;
justify-items: center;
}
.heading {
width: 100%;
height: 20px;
text-align: center;
}

.NotesList {
position: relative;
top: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 90%;
width: 100%;
overflow-y: auto;
scrollbar-gutter: stable;
}
.container {
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
align-content: flex-start;
justify-items: center;
}
.heading {
width: 100%;
height: 20px;
text-align: center;
}

.NotesList {
position: relative;
top: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 90%;
width: 100%;
overflow-y: auto;
scrollbar-gutter: stable;
}
theoriginalandrew
Have you tried to use overflow: hidden; on the class which you are wanting content not to overflow?
👻Ghost in Your pants👻
no i want it to overflow but not in the top see the 1st element is underneeth the headder
theoriginalandrew
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?
👻Ghost in Your pants👻
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
theoriginalandrew
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?
👻Ghost in Your pants👻
i have added a gap as you can see now its wired af
No description
theoriginalandrew
let me replicate this in an online coding tool its an easy solution, but hard to type out 😄
👻Ghost in Your pants👻
i want it to be somthing like this the scroll bar is highligeted in green
No description
👻Ghost in Your pants👻
i have been scratching my head sinc yesterday man css bugs are something
theoriginalandrew
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;
👻Ghost in Your pants👻
i see let me try
👻Ghost in Your pants👻
yo 💀
No description
theoriginalandrew
not overflowing under the header tho 😉
👻Ghost in Your pants👻
yes i have made changes but now the whole page is now scrolling even tho the notes list has a overflow of auto
theoriginalandrew
ahh. i'm still replicating it locally for ya, one sec
👻Ghost in Your pants👻
i added a wrapper as you said
theoriginalandrew
add overflow: hidden; to the NotesListWrapper and see if that does it?
👻Ghost in Your pants👻
now nothing scrolls
👻Ghost in Your pants👻
its all stuck
theoriginalandrew
is the inner container still set to be overflow-y: scroll? and a height of 100%?
theoriginalandrew
CodeSandbox
CodeSandbox brings instant cloud development environments that keep you in flow.
👻Ghost in Your pants👻
yess thats what i want overflow y auto
theoriginalandrew
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
👻Ghost in Your pants👻
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?
theoriginalandrew
i can't actually, my git account is work related so I can't contribute on non-work repos
👻Ghost in Your pants👻
ohh i can share the the repo as zip if you wanna try locally
theoriginalandrew
i mean i've basically built the layout you shared in that link i sent above
No description
👻Ghost in Your pants👻
i fixed it by removing display flex fromt he inner container man flex box is something
theoriginalandrew
yeah you shouldn't need flexbox in the scrolling part of the container
👻Ghost in Your pants👻
thx for your help i was in fault in not looking at the pen carefully lmao
theoriginalandrew
no worries 😄 i do front-end work for a living so it wasn't too complicated actually just built this exact pattern today
👻Ghost in Your pants👻
btw in other note do you know how to get media quearies in react?
theoriginalandrew
you can just write them in your CSS file if you want you can't write it inline in the component/element though
👻Ghost in Your pants👻
i want this layout to be responsive in this manner
👻Ghost in Your pants👻
the right space is just an outlet
No description
theoriginalandrew
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 much
👻Ghost in Your pants👻
and this is what i want it to become in mobile
No description
👻Ghost in Your pants👻
any tips? i thought i would conditionally render the outlet and list on mobile but it will also effect desktop
theoriginalandrew
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
👻Ghost in Your pants👻
what/ can you pls elabroate?
theoriginalandrew
trying to rig something up on that link for ya
👻Ghost in Your pants👻
this is how my route is nested
No description
theoriginalandrew
thats fine
theoriginalandrew
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.
👻Ghost in Your pants👻
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?
theoriginalandrew
portals are good for modals but just depends on how you want to manage that
👻Ghost in Your pants👻
eerm,.,.
theoriginalandrew
can't do it all for ya 😉
👻Ghost in Your pants👻
are you conditionlly rendering ??
theoriginalandrew
technically yes but actually just using CSS logic
👻Ghost in Your pants👻
i want to conditionaly render outlet on mobile 😅
theoriginalandrew
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 list
👻Ghost in Your pants👻
thats 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
theoriginalandrew
then you'd just do something like
@media screen and (max-width: 400px) {
.show-notes-container {
display: block;
}

.notes-container {
display: none;
}
}
@media screen and (max-width: 400px) {
.show-notes-container {
display: block;
}

.notes-container {
display: none;
}
}
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.
👻Ghost in Your pants👻
i have successfully achived this using vanila css thx for the tip andrew
Want results from more Discord servers?
Add your server