Question

是否可以使用flexbox来填充整个剩余区域的div（使用flex-grow: 1）并使其具有＆＃39;子百分比尺寸百分比？

我试过了：

<div style="height:700px; width 100%; display:flex; flex-direction: column; background-color:red;">
   <div>Hello Plunker!</div>
   <div style="background-color:green; flex-grow:1;">
      <div style="background-color: blue; height:70%; width:70%;"></div>
   </div>
</div>

Flexbox是实现这一目标的正确方法吗？

Answer 1

是的，如this question

中提到的那样完全可能

您只需要为孩子（持有孙子元素）指定100％的高度

JSfiddle Demo

.child {
    background-color:green; 
    flex-grow:1;
    height: 100%;
}

＆＃13;

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.parent {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 0, 0, 0.5);
}
.child {
  background-color: green;
  flex-grow: 1;
  height: 100%;
}
.g-child {
  background: blue;
  height: 70%;
  width:70%;
}

＆＃13;

<div class="parent">
  <div>Hello Plunker!</div>
  <div class="child">
    <div class="g-child"></div>
  </div>
</div>

＆＃13;

Answer 2

需要将父div设置为＆＃39; position：relative;＆＃39;而孩子的位置是：绝对的;＆＃39;

<div style="height:700px; width 100%; display:flex; flex-direction: column; background-color:red;">
      <div>Hello Plunker!</div>
      <div style="background-color:green; flex-grow:1; position:relative;">
          <div style="background-color: blue; position:absolute; height:100%; width:100%;"></div>
      </div>
    </div>

具有百分比高度的css flexbox子元素元素

2 个答案: