解释使用flexbox创建页面布局时溢出的工作原理

我正在制作一个简单的页面布局,包括一个标题、一个侧栏和主要内容的其余区域。请查看下图。这是 codepen 我也把代码贴在了底部。

让我强调一下关于此页面的HTML和CSS的几点。

• 这里的站点包装器的高度为100vh,宽度为100vw。
• 站点包装器具有灵活的方向:列
• 站点包装器有两个子项,头和内容包装器。
• 内容包装器有一个白色边框,它有两个子侧栏和页面内容
• 内容包装器有溢出:隐藏,页面内容有溢出:自动

最后一点很重要,因为我的问题只与这一点有关。

现在,如果我从页面内容的直接父级内容包装器中删除overflow:hidden属性,则页面内容的overflow属性将不起作用。请检查下图。

这种行为对我来说有点棘手,因为我不知道这里应用了什么css规则。

如何在内容包装器上设置溢出属性会干扰页面内容的高度计算。(如果这没有道理,请原谅我)

如果内容包装器具有overflow:hidden或overflow:auto,则页面内容的溢出将起作用。

我需要帮助来了解这里发生了什么。

HTML

<div class="site-wrapper">
  <header class="header">HEADER</header>
  <div class="content-wrapper">
    <aside class="side-bar">SIDEBAR</aside>
    <main class="page-content">
      <ul class="long-list">
        <li class="list-item">1</li>
        <li class="list-item">2</li>
        <li class="list-item">3</li>
        <li class="list-item">4</li>
        <li class="list-item">5</li>
        <li class="list-item">6</li>
        <li class="list-item">7</li>
        <li class="list-item">8</li>
        <li class="list-item">9</li>
        <li class="list-item">10</li>
        <li class="list-item">11</li>
        <li class="list-item">12</li>
      </ul>
    </main>
  </div>
</div>

CSS

*{
  box-sizing: border-box;  
}

body{
  margin: 0;
  font-family: monospace;
  color: #ffffff;
}

.site-wrapper{
  display: flex;
  flex-direction:column;
  height:100vh;
  width:100vw;
  background-color: #47cf73;
  padding:10px;
}

.header{
  height:60px;
  background-color: #3F51B5;
}

.content-wrapper {
  flex:1;
  display: flex;
  padding: 10px;
  border: 1px solid #ffffff;
/*   overflow:hidden; */
}

.page-content{
  overflow: auto; /*this overflow only works
if its parent div (i.e .content-wrapper)
has overflow auto or hidden*/  
 flex:1;
  background-color: #FF7043;
  padding: 10px;
}

.side-bar{
  background-color: #FFEB3B;
  width: 30vw;
  max-width: 300px;
  min-width: 250px;
  margin-right: 10px;
}

.long-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-item{
  font-size:36px;
  font-family: monospace;
  color: #ffffff;
  padding: 10px;
  background-color: #FF8A65;
  text-align: center;
}


.list-item:not(:last-child){
  margin-bottom:10px;
}