css - 具有显示 flex 及其子高度的等高列(以百分比表示)

Question

我的问题是我想要 2 个具有相同高度的列，并且我用于此显示:容器中的 flex。 其中一列有一个 child ，我希望这个 child 有 parent 的百分比，但它继承了正文的百分比。

这是我的示例代码:

<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>

Answer 1

高度不像 flex 盒子那样工作。但是你可以使用嵌套的 flex-boxes 来让 child 成长。

.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;
}

<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>