html - 当正文溢出设置为隐藏时，包含 Flexbox 的 Div 不会滚动

Question

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

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

将 body 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) 指定 高度: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>