在使用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;
    }
  }
}