具有显示器flex的等高柱和其子高度百分比

Question

我的问题是我想要2个具有相同高度的列，我用于此显示：flex in container。 其中一个列有一个孩子，我希望这个孩子有父母的百分比，但它继承了身体的百分比。

这是我的示例代码：

＆＃13;

＆＃13;

<style>
  .container {
    display: flex;
  }
  .container > div {
    float: left;
    width: 200px;
  }
  .parent1 {
    border: solid 1px red;
  }
  .parent2 {
    border: solid 1px blue;
  }
  .child {
    background-color: yellow;
    height: 100%; /*the problem is here, the div inherit the height of the body*/
  }
</style>
<div class="container">
  <div class="parent1">
    dynamic test
    <br />dynamic test
    <br />dynamic test
    <br />dynamic test
    <br />dynamic test
  </div>
  <div class="parent2">
    <div class="child">
      child
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

高度不像flex-box那样工作。但是你可以使用嵌套的弹性框来让孩子成长。

＆＃13;

＆＃13;

.container {
  display: flex;
}
.container > div {
  float: left;
  width: 200px;
}
.parent1 {
  border: solid 1px red;
}
.parent2 {
  border: solid 1px blue;
}
.child {
  background-color: yellow;
  /* Remove the following line */
  /* height: 100%;  the problem is here, the div inherit the height of the body */
}

/* Add this */

.parent2 {
  display: flex;
  flex-direction: column; /* To have several children with % heights */
}
.child {
  flex: 1 0 0px;
}
.child+.child {
  background: aqua;
}

＆＃13;

<div class="container">
  <div class="parent1">
    dynamic test
    <br />dynamic test
    <br />dynamic test
    <br />dynamic test
    <br />dynamic test
    <br />dynamic test
  </div>
  <div class="parent2">
    <div class="child">
      child
    </div>
    <div class="child">
      child
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;