容器与高度100％配合内容，取消设置高度设定高度亲100％

Question

所以我有一个height属性为css的情况。

根据[定义]（https://www.w3schools.com/cssref/pr_dim_height.asp），带有height: 50%的容器

  

将元素的高度设置为父级高度的50％   元素

这里有2个代码段，唯一的区别是height属性设置为100％或根本没有设置

设置了height属性： JSFIDDLE

.parent {
  display: flex;
  min-height: 300px;
  background-color: grey;
  padding: 30px;
}

.child {
  position: relative;
  background-color: red;
  height: 100%;
}

.content {
  margin: 20px;
  height: 50px;
  width: 100px;
  background-color: blue;
}

<div class="parent">
  <div class="child">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

如果没有高度属性集（按预期运行）：JSFIDDLE

.parent {
  display: flex;
  min-height: 300px;
  background-color: grey;
  padding: 30px;
}

.child {
  position: relative;
  background-color: red;
}

.content {
  margin: 20px;
  height: 50px;
  width: 100px;
  background-color: blue;
}

<div class="parent">
  <div class="child">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

对我来说，这与height属性的定义相反，为什么呢？ 我注意到，在父级中没有display: flex时，行为会有所不同，但是height: 100%却什么也没做。