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

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•13mo ago

Have you tried to use overflow: hidden; on the class which you are wanting content not to overflow?

👻Ghost in Your pants👻OP•13mo ago

no i want it to overflow but not in the top see the 1st element is underneeth the headder

theoriginalandrew•13mo ago

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👻OP•13mo ago

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•13mo ago

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👻OP•13mo ago

i have added a gap as you can see now its wired af

theoriginalandrew•13mo ago

let me replicate this in an online coding tool its an easy solution, but hard to type out 😄

👻Ghost in Your pants👻OP•13mo ago

i want it to be somthing like this the scroll bar is highligeted in green

👻Ghost in Your pants👻OP•13mo ago

i have been scratching my head sinc yesterday man css bugs are something

theoriginalandrew•13mo ago

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👻OP•13mo ago

i see let me try

👻Ghost in Your pants👻OP•13mo ago

yo 💀

theoriginalandrew•13mo ago

not overflowing under the header tho 😉

👻Ghost in Your pants👻OP•13mo ago

yes i have made changes but now the whole page is now scrolling even tho the notes list has a overflow of auto

theoriginalandrew•13mo ago

ahh. i'm still replicating it locally for ya, one sec

👻Ghost in Your pants👻OP•13mo ago

sure

👻Ghost in Your pants👻OP•13mo ago

i added a wrapper as you said

theoriginalandrew•13mo ago

add overflow: hidden; to the NotesListWrapper and see if that does it?

👻Ghost in Your pants👻OP•13mo ago

now nothing scrolls

👻Ghost in Your pants👻OP•13mo ago

its all stuck

theoriginalandrew•13mo ago

is the inner container still set to be overflow-y: scroll? and a height of 100%?

theoriginalandrew•13mo ago

here's an example https://codesandbox.io/p/sandbox/overflowing-container-z95mxd

CodeSandbox

CodeSandbox brings instant cloud development environments that keep you in flow.

👻Ghost in Your pants👻OP•13mo ago

yess thats what i want overflow y auto

theoriginalandrew•13mo ago

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👻OP•13mo ago

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•13mo ago

i can't actually, my git account is work related so I can't contribute on non-work repos

👻Ghost in Your pants👻OP•13mo ago

ohh i can share the the repo as zip if you wanna try locally

👻Ghost in Your pants👻OP•13mo ago

here

pocket-notes-main.zi...

theoriginalandrew•13mo ago

i mean i've basically built the layout you shared in that link i sent above

👻Ghost in Your pants👻OP•13mo ago

i fixed it by removing display flex fromt he inner container man flex box is something

👻Ghost in Your pants👻OP•13mo ago

theoriginalandrew•13mo ago

yeah you shouldn't need flexbox in the scrolling part of the container

👻Ghost in Your pants👻OP•13mo ago

thx for your help i was in fault in not looking at the pen carefully lmao

theoriginalandrew•13mo ago

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👻OP•13mo ago

btw in other note do you know how to get media quearies in react?

theoriginalandrew•13mo ago

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👻OP•13mo ago

i want this layout to be responsive in this manner

👻Ghost in Your pants👻OP•13mo ago

the right space is just an outlet

👻Ghost in Your pants👻OP•13mo ago

theoriginalandrew•13mo ago

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👻OP•13mo ago

and this is what i want it to become in mobile

👻Ghost in Your pants👻OP•13mo ago

any tips? i thought i would conditionally render the outlet and list on mobile but it will also effect desktop

theoriginalandrew•13mo ago

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👻OP•13mo ago

what/ can you pls elabroate?

theoriginalandrew•13mo ago

trying to rig something up on that link for ya

👻Ghost in Your pants👻OP•13mo ago

i see

👻Ghost in Your pants👻OP•13mo ago

this is how my route is nested

theoriginalandrew•13mo ago

thats fine

theoriginalandrew•13mo ago

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👻OP•13mo ago

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•13mo ago

portals are good for modals but just depends on how you want to manage that

👻Ghost in Your pants👻OP•13mo ago

eerm,.,.

theoriginalandrew•13mo ago

can't do it all for ya 😉

👻Ghost in Your pants👻OP•13mo ago

are you conditionlly rendering ??

theoriginalandrew•13mo ago

technically yes but actually just using CSS logic

👻Ghost in Your pants👻OP•13mo ago

i want to conditionaly render outlet on mobile 😅

theoriginalandrew•13mo ago

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

theoriginalandrew•13mo ago

👻Ghost in Your pants👻OP•13mo ago

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•13mo ago

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👻OP•13mo ago

i have successfully achived this using vanila css thx for the tip andrew

Gaming

Programming

flexBox overflowing underneath another flexbox even if the scorll possition is at top