Overflow scroll not showing everything in div, some part of the left side is still hidden

Question

I have a flex container containing 7 columns (Monday to Sunday), each with a min-width of 100px. I want users to scroll horizontally to see every column when the screen is smaller. I set the flex container to overflow: scroll. Yes, now the scrollbar appears, and I can scroll left and right. However, the smaller the screen is, the more part of the left side is still hidden, no matter how I scroll. The right side is fine.

Please see the code here: https://codesandbox.io/s/busy-framework-ke4l0?file=/index.html

How can I fix this? Thanks in advance.

Answer 1

Your problem is the justify-content: center; in the .week-flex class. Because the browser then always centers the (.week-flex) container which leads to this unexpected behavior. If you want a scrollable, centered flex container you could use an extra container like this.

<div class="page-container">

  <h1>課程專區</h1>

  <div class="container">
    <div class="week-flex">
      <div class="day-flex">
        <div class="day">Monday</div>
        <div class="course">
          <h4 class="level">初階</h4>
          <p class="topic">Lv. 1</p>
          <p class="time">20:00-21:00</p>
          <p class="status open">即將開課</p>
        </div>
      </div>
      <div class="day-flex">
        <div class="day">Tuesday</div>
        <div class="course">
          <h4 class="level">初階</h4>
          <p class="topic">Lv. 1</p>
          <p class="time">20:00-21:00</p>
          <p class="status">課程進行中</p>
        </div>
        <div class="course">
          <h4 class="level">初階</h4>
          <p class="topic">Lv. 1</p>
          <p class="time">20:00-21:00</p>
          <p class="status open">即將開課</p>
        </div>
      </div>
      <div class="day-flex">
        <div class="day">Wednesday</div>
        <div class="course">
          <h4 class="level">初階</h4>
          <p class="topic">Lv. 1</p>
          <p class="time">20:00-21:00</p>
          <p class="status open">即將開課</p>
        </div>
        <div class="course">
          <h4 class="level">初階</h4>
          <p class="topic">Lv. 1</p>
          <p class="time">20:00-21:00</p>
          <p class="status open">即將開課</p>
        </div>
      </div>
      <div class="day-flex">
        <div class="day">Thursday</div>
        <div class="course">
          <h4 class="level">初階</h4>
          <p class="topic">Lv. 1</p>
          <p class="time">20:00-21:00</p>
          <p class="status">課程進行中</p>
        </div>
      </div>
      <div class="day-flex">
        <div class="day">Friday</div>
        <div class="course">
          <h4 class="level">初階</h4>
          <p class="topic">Lv. 1</p>
          <p class="time">20:00-21:00</p>
          <p class="status open">即將開課</p>
        </div>
      </div>
      <div class="day-flex">
        <div class="day">Saturday</div>
        <div class="course">
          <h4 class="level">初階</h4>
          <p class="topic">Lv. 1</p>
          <p class="time">20:00-21:00</p>
          <p class="status open">即將開課</p>
        </div>
      </div>
      <div class="day-flex">
        <div class="day">Sunday</div>
        <div class="course">
          <h4 class="level">初階</h4>
          <p class="topic">Lv. 1</p>
          <p class="time">20:00-21:00</p>
          <p class="status">課程進行中</p>
        </div>
      </div>
    </div>
  </div> 
</div>

And the css.

.container {
  display: flex;
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

.week-flex {
  display: flex;
  flex-direction: row;
  column-gap: 10px;
  margin: 0 auto;
}

.day-flex {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  min-width: 100px;
  text-align: center;
}

.course {
  width: 100%;
  border: 1px solid black;
  border-radius: 5px;
  padding: 5px 0;
}

h4 {
  margin: 0;
}

.status {
  color: #125a12;
}

.status.open {
  color: #941616;
}

Here is also a working codesandbox: https://codesandbox.io/s/gifted-albattani-e75bc