Div 当 body overflow 设置为 hidden 时包含 flexbox 不滚动

Question

我想要做的是让 mpct-container 可以滚动，而不必滚动整个页面主体。

我已经尝试了很多时间，但未能找到可行的解决方案。

将正文 overflow 更改为 auto 可以解决问题，但这不是预期的设计。

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

body 元素不需要 overflow: hidden。

只需 .mpct-container 全高 — height: 100% 而不是 height: 2400px。

并给出其内容(.mpct-timeline1)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>

Div 当 body overflow 设置为 hidden 时包含 flexbox 不滚动

Div containing flexbox not scrolling when body overflow set to hidden

html

css

flexbox