Html 100%高度，不带滚动条（带flexbox的父级和嵌套子级）

我喜欢100%的高度，没有任何滚动条。在我的示例中，浏览器似乎在计算整个高度。子元素如何获得父元素的100%高度

html

<div class="wrapper">
<div class="header"></div> //<- Here is the problem
<div class="content">
    <div class="element">
       <div class="element-child1"></div>
       <div class="element-child2"></div>
    </div>
<div/>

滚动条示例：

CSS

---

您应该能够使用

flex-grow

属性：

HTML

<div class="wrapper">
    <div class="header"></div>
    <div class="content">
        <div class="element-child1"></div>
        <div class="element-child2"></div>
    <div/>
</div>

备选方案

  html, body, .wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
  }

  .wrapper > .header {
    flex: 0 0 40px;
    background-color: black;
  }

  .wrapper > .content {
    align-self: stretch;
    flex: 1;
    background: red;
  }

  .element {
     align-self: stretch;
     display: flex;
     flex-direction: column;
     background-color: yellow;
  }

  .element-child1 {
     flex: 0 0 20px;
     background-color: blue;
  }

  .element-child2 {
     flex: 1;
     background-color: green;
  }

html, body, .wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.wrapper > .header {
    flex: 0 0 40px;
    background-color: black;
}

.wrapper > .content {
    flex-grow: 1;    
    display: flex;
    background: red;
    flex-direction: column;
}

.element-child1 {
    flex: 0 0 20px;
    background-color: blue;
}

.element-child2 {
    flex-grow: 1;
    background-color: green;
}

---

谢谢，但这不是我要问的。我不能只删除父元素。@MR.ABC-很抱歉，不清楚您的问题，请参阅上面的更新答案。是的，有时候很难。元素-child2不再是100%。它没有填充内容。@MR.ABC-仍然不清楚您的意思，添加

overflow-y:scroll

到

.element-child2

我只需要一个100%的元素。overflow-y:滚动将破坏下面的布局。我已经这样做了。Flexbox解决方案将更加完美。不需要任何支持。只是为了我自己。如果flexbox没有答案，您将获得接受。请查看我的答案

html, body, .wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.wrapper > .header {
    flex: 0 0 40px;
    background-color: black;
}

.wrapper > .content {
    flex-grow: 1;    
    display: flex;
    background: red;
    flex-direction: column;
}

.element-child1 {
    flex: 0 0 20px;
    background-color: blue;
}

.element-child2 {
    flex-grow: 1;
    background-color: green;
}