在使用grid佈局的時候發現，如果內容超過了容器，則容器會被撐大。此時，使用overflow:scrool 則可以通過滾動條看完所有內容。

然而，當我們使用grid佈局巢狀的時候，發現，在grid佈局中的某塊grid-area使用overflow:scrool，我們依然無法看完整體內容。
此時我們需要在grid中，加上overflow:hidden ，使得，父容器不受子容器影響。在此基礎上，在子容器加上overflow:scrool

.lession-wrapper {
  width: 100%;
  height: 100%;
  display: grid;
  margin: 0;
  .lession {
//==========================
    overflow
 
: hidden;
    display: grid;
//==========================
    grid-template-areas: "tip" "ll";
    grid-template-rows: 3rem 1fr;
    .tip {
      grid-area: tip;
    }
    .list {
      grid-area: ll;
      //==========================
      overflow-y: auto;
      //==========================
      height
 
: inherit;
    }
    .font-black {
      color: black;
    }
    .font-gray {
      color: grey;
    }
    .font-28 {
      font-size: 28px;
      margin: 0 10px;
    }
    .font-22 {
      font-size: 22px;
      margin: 0 10px;
    }
    .font-16 {
      font-size: 16px;
      margin: 0 10px;
    }
  }
}