CSS网格：第二个网格在100％高度内

Question

我有CSS Grid显示一些布局

.wrapper {
  width: 400px;
  height: 300px;

  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
   "tb tb"
   "lb cn";
 }

.lb {
  grid-area: lb;
  background: red;
  overflow: auto;
}

.tb {
  grid-area: tb;
  background: blue;
}

.cn {
   grid-area: cn;
   background: silver;
    overflow: auto;
}

.subgrid {
}

.header {
  height: 150px;
  background: yellow;

}

.content {

}

    <div class="wrapper">
      <div class="lb">LEFT BAR Lorem ipsum dolor sigiT BAR Lorem ipsum dolor sigiat voluptate, quasi pariatur ad dignissimT BAR Lorem ipsum dolor sigiat voluptate, quasi pariatur ad dignissimT BAR Lorem ipsum dolor sigiat voluptate, quasi pariatur ad dignissimT BAR Lorem ipsum dolor sigiat voluptate, quasi pariatur ad dignissimT BAR Lorem ipsum dolor sigiat voluptate, quasi pariatur ad dignissimat voluptate, quasi pariatur ad dignissimos.</div>
      <div class="tb">TOB BAR</div>
      <div class="cn">
        <div class="subgrid">
              <div class="header">HEADER</div>
              <div class="content">  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptatum, sed, eos nulla, dignissimos alias ipsum id quasi vero veritatis blanditiis. Repudiandae quisnissimos alias ipsum id quasi vero veritatis blanditiis. Repudiandae qunissimos alias ipsum id quasi vero veritatis blanditiis. Repudiandae qu at s blanditiis. Repudiandae qunissimos alias ipsum id quasi vero veritatis blanditiis. Repudiandae qu at ipsam soluta recusandae alias quas labore a, fugiat eius sed, nostrum nulla. m ut facilis fugit, quam amet nobis quos consectetur excepturi numquam omnis.</div>
         </div>
      </div>

    </div>

示例1

它看起来不错，因为'subgrid'显示滚动条。但我想做一个改变。我想在'subgrid'中移动滚动条（这将是element-ui中的另一个控件el'el-tab'）

所以'content'应该用控件的左边空格填充'subgrid'，但是我不能用参数“height：100％”或“height：100vh”来填充它，因为在CSS GRID中这个参数不能正常工作：（

高度：100％; ：它没有用高度填充正确的父控件：300px;

.wrapper {
  width: 400px;
  height: 300px;

  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
   "tb tb"
   "lb cn";
 }

.lb {
  grid-area: lb;
  background: red;
  overflow: auto;
}

.tb {
  grid-area: tb;
  background: blue;
}

.cn {
   grid-area: cn;
   background: silver;

}

.subgrid {
}

.header {
  height: 150px;
  background: yellow;

}

.content {
  height: 100%;
  overflow: auto;
}

    <div class="wrapper">
      <div class="lb">LEFT BAR Lorem ipsum dolor sigiT BAR Lorem ipsum dolor sigiat voluptate, quasi pariatur ad dignissimT BAR Lorem ipsum dolor sigiat voluptate, quasi pariatur ad dignissimT BAR Lorem ipsum dolor sigiat voluptate, quasi pariatur ad dignissimT BAR Lorem ipsum dolor sigiat voluptate, quasi pariatur ad dignissimT BAR Lorem ipsum dolor sigiat voluptate, quasi pariatur ad dignissimat voluptate, quasi pariatur ad dignissimos.</div>
      <div class="tb">TOB BAR</div>
      <div class="cn">
        <div class="subgrid">
              <div class="header">HEADER</div>
              <div class="content">  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptatum, sed, eos nulla, dignissimos alias ipsum id quasi vero veritatis blanditiis. Repudiandae quisnissimos alias ipsum id quasi vero veritatis blanditiis. Repudiandae qunissimos alias ipsum id quasi vero veritatis blanditiis. Repudiandae qu at s blanditiis. Repudiandae qunissimos alias ipsum id quasi vero veritatis blanditiis. Repudiandae qu at ipsam soluta recusandae alias quas labore a, fugiat eius sed, nostrum nulla. m ut facilis fugit, quam amet nobis quos consectetur excepturi numquam omnis.</div>
         </div>
      </div>

    </div>

示例2

是否有任何选项可以从内部填充内容并设置完整高度，而无需将所有内容放在一个主GRID中。我尝试显示选项：subgrid或inline-grid，flex或bootstrap row，col但没有任何帮助:(。我只能在一个网格中设置整个布局时设置，如下例所示。

.wrapper {
  width: 400px;
  height: 300px;

  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
   "tb tb"
   "lb header"
   "lb content";
 }

.lb {
  grid-area: lb;
  background: red;
  overflow: auto;
}

.tb {
  grid-area: tb;
  background: blue;
}

.cn {
   grid-area: cn;

}


.header {
  grid-area: header;
  height: 150px;
  background: yellow;

}

.content {
  grid-area: content;
  overflow: auto;
   background: silver;
}

    <div class="wrapper">
      <div class="lb">LEFT BAR Lorem ipsum dolor sigiat voluptate, quasi pariatur ad di voluptatum, sed, eos nulla, dignissimos alias ipsum id quasi vero veritatis blanditiis. Repudiandae quis at ipsam soluta recusandae alias quas labore a, fugiat eius sed, nostrum nulla. m ut facilis fugit, quam amet nobis quos consectetur exceptignissimos.</div>
      <div class="tb">TOB BAR</div>
      <div class="header">HEADER</div>
      <div class="content">  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptatum, sed, eos nulla, dignissimos alias ipsum id quasi vero veritatis blanditiis. Repudiandae quis at ipsam soluta recusandae alias quas labore a, fugiat eius sed, nostrum nulla. m ut facilis fugit, quam amet nobis quos consectetur excepturi numquam omnis.</div>


    </div>

网格总布局