Question 209784 in Html Question posted in
Some basic documentation can be found here.

Html – My overflow scroll bar is not showing up?

I tried making a spotify clone web app and my overflow : auto property is not working its not showing a scroll bar , I don’t know why it isn’t working ??

.main-content {
  padding: 1.5rem;
  overflow: scroll;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  margin: 1.5rem;
}

.card {
  width: 175px;
  background-color: #252524;
  border-radius: 0.5rem;
  padding: 0.76rem;
  margin-right: 2rem;
}

.card img {
  width: 100%;
  border-radius: 0.5rem;
}

.card-title {
  font-size: 1.3rem;
  font-weight: bold;
}

.card-info {
  font-size: 0.89rem;
  opacity: 0.8;
}
<div class='main-content'>
  <h2>Top Hits</h2>
  <div class="card-container">
    <div class="card">
      <img src='./assets/card1img.png'>
      <p class='card-title'>Sidhu Moosewala</p>
      <p class='card-info'>Your daily updates of most played tracks...</p>
    </div>
    <div class="card">
      <img src='./assets/card2img.jpeg'>
      <p class='card-title'>Drake</p>
      <p class='card-info'>Your daily updates of most played tracks...</p>
    </div>
    <div class="card">
      <img src='./assets/card3img.jpeg'>
      <p class='card-title'>Tupac Shakur</p>
      <p class='card-info'>Your daily updates of most played tracks...</p>
    </div>
    <div class="card">
      <img src='./assets/card4img.jpeg'>
      <p class='card-title'>Tarsem Jassar</p>
      <p class='card-info'>Your daily updates of most played tracks...</p>
    </div>
  </div>
</div>

this is just a small piece of code , in my project I have inserted several more cards but my main-content
div is not showing a scroll option even after setting up the overflow : auto property , I don’t know what to do help me out please( this is my first major project 🙂 )

Tags:

2

Answers


  1. 0

    Are you on MAC OS? Seems to be a known issue there…
    If not, have you tried the "overflow:scroll" on other div’s or the body?
    And I would maybe try to use another browser, if you did not already 😀

    Login or Signup to reply.
  2. 0

    When you set overflow: auto you need to set max-width or max-height so that they can be overflow.
    Something like this:

        .main-content {
      padding: 1.5rem;
      overflow: scroll;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search