Div containing flexbox not scrolling when body overflow set to hidden

Question

What I want to do is make the mpct-container be scrollable without having to scroll the entire body of the page.

I have been trying for quite a lot of time but have not been able to find a working solution.

Changing body overflow to auto solves the problem but it is not the intended design.

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-size: 30px;
}

body {
  background: white;
  font-family: 'Zen Kurenaido', sans-serif;
}

.mpct-container {
  display: flex;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 75vw;
  height: 2400px;
  border-right: 1px hsl(0deg, 0%, 80%) solid;
  overflow: scroll;
}

.mpc-timeline {
  display: flex;
  flex-direction: column;
  width: 6%;
  font-size: 0.5rem;
}

.mpct-hour {
  min-height: 0;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

```

<div class="mpct-container">
  <div class="mpc-timeline">
    <div class="mpct-hour mpct-0">12 AM</div>
    <div class="mpct-hour alternate mpct-1">1 AM</div>
    <div class="mpct-hour mpct-2">2 AM</div>
    <div class="mpct-hour alternate mpct-3">3 AM</div>
    <div class="mpct-hour mpct-4">4 AM</div>
    <div class="mpct-hour alternate mpct-5">5 AM</div>
    <div class="mpct-hour mpct-6">6 AM</div>
    <div class="mpct-hour alternate mpct-7">7 AM</div>
    <div class="mpct-hour mpct-8">8 AM</div>
    <div class="mpct-hour alternate mpct-9">9 AM</div>
    <div class="mpct-hour mpct-10">10 AM</div>
    <div class="mpct-hour alternate mpct-11">11 AM</div>
    <div class="mpct-hour mpct-12">12 Noon</div>
    <div class="mpct-hour alternate mpct-13">1 PM</div>
    <div class="mpct-hour mpct-14">2 PM</div>
    <div class="mpct-hour alternate mpct-15">3 PM</div>
    <div class="mpct-hour mpct-16">4 PM</div>
    <div class="mpct-hour alternate mpct-17">5 PM</div>
    <div class="mpct-hour mpct-18">6 PM</div>
    <div class="mpct-hour alternate mpct-19">7 PM</div>
    <div class="mpct-hour mpct-20">8 PM</div>
    <div class="mpct-hour alternate mpct-21">9 PM</div>
    <div class="mpct-hour mpct-22">10 PM</div>
    <div class="mpct-hour alternate mpct-23">11 PM</div>
  </div>
</div>

Codepen

Answer 1

You don't need overflow: hidden on the body element.

Just make the .mpct-container full height — height: 100% not height: 2400px.

And give its content (.mpct-timeline1) the height: 2400px.

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Zen+Kurenaido&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  /* overflow: hidden; */ /* not necessary */
  font-size: 30px;
}

body {
  background: white;
  font-family: 'Zen Kurenaido', sans-serif;
}

.mpct-container {
  display: flex;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 75vw;
  /* height: 2400px; */
  height: 100%;  /* new */
  border-right: 1px hsl(0deg, 0%, 80%) solid;
  overflow: scroll;
}

.mpc-timeline {
  display: flex;
  flex-direction: column;
  width: 6%;
  font-size: 0.5rem;
  height: 2400px; /* new */
}

.mpct-hour {
  min-height: 0;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.mpct-hour.alternate {
  background-color: hsl(0deg, 0%, 95%);
}

<div class="mpct-container">
    <div class="mpc-timeline">
      <div class="mpct-hour mpct-0">12 AM</div>
      <div class="mpct-hour alternate mpct-1">1 AM</div>
      <div class="mpct-hour mpct-2">2 AM</div>
      <div class="mpct-hour alternate mpct-3">3 AM</div>
      <div class="mpct-hour mpct-4">4 AM</div>
      <div class="mpct-hour alternate mpct-5">5 AM</div>
      <div class="mpct-hour mpct-6">6 AM</div>
      <div class="mpct-hour alternate mpct-7">7 AM</div>
      <div class="mpct-hour mpct-8">8 AM</div>
      <div class="mpct-hour alternate mpct-9">9 AM</div>
      <div class="mpct-hour mpct-10">10 AM</div>
      <div class="mpct-hour alternate mpct-11">11 AM</div>
      <div class="mpct-hour mpct-12">12 Noon</div>
      <div class="mpct-hour alternate mpct-13">1 PM</div>
      <div class="mpct-hour mpct-14">2 PM</div>
      <div class="mpct-hour alternate mpct-15">3 PM</div>
      <div class="mpct-hour mpct-16">4 PM</div>
      <div class="mpct-hour alternate mpct-17">5 PM</div>
      <div class="mpct-hour mpct-18">6 PM</div>
      <div class="mpct-hour alternate mpct-19">7 PM</div>
      <div class="mpct-hour mpct-20">8 PM</div>
      <div class="mpct-hour alternate mpct-21">9 PM</div>
      <div class="mpct-hour mpct-22">10 PM</div>
      <div class="mpct-hour alternate mpct-23">11 PM</div>
    </div>
  </div>