在博客园运行html和js示例

示例

<div class="container">
  <div class="box1">
    <div class="son1">
      <span>son1</span>
    </div>
  </div>
  <div class="box2">
    <div class="son2">
      <span>son2</span>
      <p>在flex中，即使box1内容的高度超过了父容器，也不会影响box2中设定百分比高度</p>
      <p>然而，在grid中，box1的内容超过了父容器，那么，格子的高度content被撑开。此时我们发现百分比高度不基于父容器高度，而是那个隐藏的格子高度。可以说非常的逆天。</p>
    </div>
  </div>
</div>
<style>
.container{
  height: 50vh;
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* display: flex; */
  gap: 24px;
}
.box1,.box2{
  /* 按照预期，box1和2的高度为父容器高度，也就是50vh */
  /* 然而在grid布局时，子元素超出布局高度，就不是这样了 */
  height: 100%;
  /* 可以通过overflow属性来解决 */
  /* overflow: auto; */
}
.son1{
  height: 70vh;
  background-color: antiquewhite;
}
.son2{
  height: 100%;
  background-color: burlywood;
}
</style>

console.log([1,2,5,7])