如何显示部分的内容而不让它溢出到另一个部分 React.js

Question

我的 React 网站上有一个名为“时间线”的部分正在溢出到另一个名为“联系人”的部分。

我该怎么做才能让时间轴的所有内容都显示出来，但又不会溢出到另一个部分？

编辑：浅蓝色部分是联系部分开始的地方

编辑：

import React from 'react'
import './app.scss';
import Navbar from "./components/navbar/Navbar"
import Intro from "./components/intro/Intro"
import Menu from "./components/menu/Menu"
import Timeline from './components/timeline/Timeline';
import Contact from "./components/contact/Contact"
import { useState } from "react"
App.jsx
function App() {
  const [menuOpen, setMenuOpen] = useState(false)
  return (
    <div className="app">
      <Navbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
      <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
      <div className="sections">
        <Intro/>
        <Timeline/>
        <Contact/>
      </div>
    </div>
  );
}

app.scss

.app {
    height: 100vh;

    .sections {
        width: 100%;
        height: calc(100vh - 70px);
        // background-color: #1F1D36;
        position: relative;
        top: 70px;
        scroll-behavior: smooth;
        display: flex;
        scroll-snap-type: y mandatory;
        scrollbar-width: none; // for firefox
        &::-webkit-scrollbar{
            display: none;
        }

        > * {
            width: 100vw;
            height: calc(100vh - 70px);
            scroll-snap-align: start;
        }
    }
}

Answer 1

将 max-height 添加到包含时间线的 .sections 并添加 overflow-y:auto.

这会阻止该部分额外扩展并使内容滚动。

这是一个代码，您可以参考。

*{
  padding:0;
  margin:0;
  box-sizing: border-box;
}

.child{
  height: calc(100vh - 70px);
}

.child:first-child{
  background: yellow;
  max-height: calc(100vh - 70px);
  overflow-y:auto;
}

.child:last-child{
  background: lightblue;
}

.large{
  height: 900px;
  background: white;
  margin: 2rem;
}

<html>

<body>
  <div id="parent">
  <div class="child">
    <div class="large"></div>
  </div>
  <div class="child"></div>
</div>
</body>
</html>

如何显示部分的内容而不让它溢出到另一个部分 React.js

how to show contents of section while not having it overflow into another section React.js

javascript

frontend

reactjs