css prevent overflow on scroll

Question

I have a simple react app with some pictures in a <ul> element but in mobile view when I scroll up and down my pictures overflow on my navbar while I want them to scroll inside my <ul> element only . How can I fix this ? I have written my css down below for normal and what I have done so far for mobile view .

My react components :

NavBar.js

export default function NavBar() {
  const {score,topScore} = usePokemon(); //get scores 
  return (
    <div className="nav-container">
      <h1 className="app-title">Pokemon Memory Game</h1>
      <div className="scores-container">
          <div className="current-score">
            <h3>Score : {score}</h3>
          </div>
          <div className="top-score">
            <h3>Top Score : {topScore}</h3>
          </div>
      </div>
    </div>
  )
}

PokeList.js

export default function PokeList() {

    const {pokemon,fetchPokemon,loading,fetchedOnce} = useFetch();  //get fetch data  
    const {checkClicked} = usePokemon(); //get function from context api to update score 
    const fetchAndCheck = (name)=>{  //when you click on a pokemon check if it is clicked and refetch and shuffle pokemon 
      checkClicked(name);
      fetchPokemon();
    }

    return ( 
      <ul className="pokemon-list">
        { (loading && !fetchedOnce)? //show loading component only on first fetch 
          <Loader
            className = "loading-spinner"
            type="ThreeDots"
            color="#00008b"
            height={100}
            width={100}
          /> 
        : 
          pokemon.map((poke)=>{  //pokemon cards 
          return( 
          <li key = {poke.id} onClick={()=>fetchAndCheck(poke.name)}>
            <PokeCard  picture = {poke.sprites['front_default']} name = {poke.name}/>
          </li>);
          })
        }
       
      </ul> 
    )
  }

PokeCard.js

export default function PokeCard(props) {
  return (
    <div className="poke-card">
      <img src = {props.picture} alt = "pokemon-card" className="poke-entry" />
      <h5 className="poke-name"> {props.name}</h5> 
    </div>
  )
}

My css :

.nav-container{
  background-color:black;
  position: fixed;
  margin:0;
  width: 100%;
  height:auto;
}

.app-title{
  color:white;
  text-align: center;
}

.scores-container{
  background-color: brown;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.scores-container > * {
  margin:5px;
}

.instructions-button{
  color:white;
  background-color:royalblue;
  border:none;
  font-size: 20px;
  padding:10px;
  border-radius:20px;
  cursor: pointer;
}

.pokemon-list{
  position: absolute;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  top:25%;
  left:2%; 
}

.poke-card{  /* complete pokemon card */
  background-color: brown;
  color:white;
  text-align: center;
  margin:10px;
  cursor: pointer;
  border-radius: 10px;
}

 .poke-entry {  /* pokemon picture  */
  background-color: white;
  height:150px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.poke-name{ /* pokemon name on text   */
  padding:5px;
  font-size: 20px;
}

@media only screen and (max-width:600px){
  .scores-container{
    padding:10px;
    white-space: nowrap;
  }

  .scores-container > *{
    margin:10px;
    margin-left:5px;
  }

  .instructions-button{
    font-size:10px;
    width:auto;
  }

  .pokemon-list{
      top:40%;
  }
}

I would appreciate your help . For any questions about my code feel free to ask

Answer 1

It's because you have position: fixed on .nav-container and if you want to fix this, you have to give this list margin-top same size as it's .nav-container