具有 display flex 的等高列及其 child 高度百分比

Question

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

这是我的示例代码：

<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-boxes 不同。但是您可以使用嵌套 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>

具有 display flex 的等高列及其 child 高度百分比

Equal height columns with display flex and its child height in percentage

css

flexbox