Html 显示不带滚动条的整个div-flexbox

我正在建设一个单页网站，并希望每个部分有一个100%的最低高度。虽然这样做是可行的，但是如果一个div的内容比容器div的内容多，那么容器div就无法扩展以适应该内容，这会给我留下一个难看的滚动条

HTML

<div id="general">
<div id="home">
<main> 
  <div class="main" id="home_main">
    <h1 id="head_home">/NAME GOES HERE</h1>
    <h3 id="tag_home">Funky tagline here</h3>
  </div> 
</main>
</div>
<div id="about">
<main> 
  <div class="main">
    <h1 id="head_about">About</h1>
<p id="para_about">Hide at bottom of staircase to trip human find something else more interesting paw at beetle and eat it before it gets away, rub whiskers on bare skin act innocent. Kitty loves pigs eat from dog's food missing until dinner time, and spend all night ensuring people don't sleep sleep all day or where is my slave? I'm getting</p>
</div> 
</main>
</div>

以下是我迄今为止的工作：

---

感谢大家的帮助：）

基本上您可以使用您的

#main:overflow-y:hidden隐藏滚动条将解决您的问题，但它也将删除滚动选项。因此，某些文本将无法访问。

我建议将放置文本的区域变大。
切换您的
高度
和
最小高度
定义，以便告诉
main
为100%高，至少100vh:

例如：
在主
div
上应用
CSS
方式，并保留高度元素

display:block;
overflow:auto;

虽然您可能不需要但仍然需要某些浏览器来呈现html，但您可以添加此
位置：相对
我希望可以访问文本，但要删除滚动条：）最多我需要一个“阅读更多”按钮，但单击后我不需要滚动条。也可以尝试链接。使用
最小高度：100vh
，我认为永远不需要身高：100%
。我认为
min height:100vh
就是所需要的。
main {
    /* height: 100vh; min-height: 100% !important; */ 
    height:100%; min-height: 100vh;
    ...
}

display:block;
overflow:auto;