总的来说，我对技术还是个新手，这给我带来了一些疑问，当我学习CSS的时候，我意识到当我向我的#容器添加100vh时，如果它有很多内容，它最终会“跳出”它的正方形，我想知道为什么。
problem in pag html
section in css
简而言之，因为当我将100VH添加到我的容器中时，它最终没有填充所有的内容

body {
  background-color: #878787;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#container {
  height: 100vh;
  margin: 60px 0 60px;
  background-color: #f8f8f8;
  border-radius: 10px;
  width: 50%;
}

<div id="container">
  <header>
    <h1>Glossário</h1>
  </header>

  <main>
    <h2>Termos de descrição</h2>
    <dl>
      <dt>The Description List</dt>
      <dd>Uma lista de pares de termos e descrições</dd>
      <dt>The Description Term </dt>
      <dd>Identifica um termo na lista de definição</dd>
      <dt>The Description Details</dt>
      <dd>Fornece detalhes ou uma definição mais completa do termo</dd>
      <dt>Lorem ipsum</dt>
      <dd>dolor sit amet consectetur adipisicing elit</dd><dt>The Description List</dt>
      <dd>Uma lista de pares de termos e descrições</dd>
      <dt>The Description Term </dt>
      <dd>Identifica um termo na lista de definição</dd>
      <dt>The Description Details</dt>
      <dd>Fornece detalhes ou uma definição mais completa do termo</dd>
      <dt>Lorem ipsum</dt>
      <dd>dolor sit amet consectetur adipisicing elit</dd><dt>The Description List</dt>
      <dd>Uma lista de pares de termos e descrições</dd>
      <dt>The Description Term </dt>
      <dd>Identifica um termo na lista de definição</dd>
      <dt>The Description Details</dt>
      <dd>Fornece detalhes ou uma definição mais completa do termo</dd>
      <dt>Lorem ipsum</dt>
      <dd>dolor sit amet consectetur adipisicing elit</dd>
    </dl>

  </main>
</div>
<footer>
  <span>Synxther</span>
</footer>