Div containing flexbox not scrolling when body overflow set to hidden-CodePudding

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 >
  <div >
    <div >12 AM</div>
    <div >1 AM</div>
    <div >2 AM</div>
    <div >3 AM</div>
    <div >4 AM</div>
    <div >5 AM</div>
    <div >6 AM</div>
    <div >7 AM</div>
    <div >8 AM</div>
    <div >9 AM</div>
    <div >10 AM</div>
    <div >11 AM</div>
    <div >12 Noon</div>
    <div >1 PM</div>
    <div >2 PM</div>
    <div >3 PM</div>
    <div >4 PM</div>
    <div >5 PM</div>
    <div >6 PM</div>
    <div >7 PM</div>
    <div >8 PM</div>
    <div >9 PM</div>
    <div >10 PM</div>
    <div >11 PM</div>
  </div>
</div>

Codepen

CodePudding user response：

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 >
    <div >
      <div >12 AM</div>
      <div >1 AM</div>
      <div >2 AM</div>
      <div >3 AM</div>
      <div >4 AM</div>
      <div >5 AM</div>
      <div >6 AM</div>
      <div >7 AM</div>
      <div >8 AM</div>
      <div >9 AM</div>
      <div >10 AM</div>
      <div >11 AM</div>
      <div >12 Noon</div>
      <div >1 PM</div>
      <div >2 PM</div>
      <div >3 PM</div>
      <div >4 PM</div>
      <div >5 PM</div>
      <div >6 PM</div>
      <div >7 PM</div>
      <div >8 PM</div>
      <div >9 PM</div>
      <div >10 PM</div>
      <div >11 PM</div>
    </div>
  </div>