SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <div id="sidebar">
      <div class="logo">logo111</div>
      <div class="main-container">
        <div class="logo">logo222</div>
        <ul class="menu-container">
          <!-- children created in JS -->
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
        </ul>
      </div>
    </div>
  </div>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* CSS style */
    #sidebar {
      /* 最外层元素 */
      display: flex;
      flex-direction: column;
      /* 定义主轴的方向。column使多个flex子项排列方向与块轴(block axis，多个块元素排列方向)排列方向一致 */
      height: 100vh;
      width: 200px;
      /* 与视口等高的高度值 */
    }

    .main-container {        
      width:150px;

      /* 包含.logo和.menu-container的容器 */
      display: flex;
      flex-direction: column;
      flex: 1;
      /* 等价 flex-flow: 1; flex-shrink: 1; flex-basis: 0%; */
    }

    .logo {
      flex: 0 0 100px;
      background: red;
    }

    .menu-container {
      flex: 1;
      flex: 1 1 0px; /* 此处与 main-container 设置 min-height:0; 效果一样。本质上都是不让采用实际内容宽度 */
      overflow-y: auto;
      /* 预期：在子元素高度超过父容器时出现滚动条，使子元素在其内部滚动 */
    }

    li {
      height: 100px;
      background: yellow;
    }
  </style>
</body>

</html>