无论潜在的顶部偏移量如何

Question

我试图在彼此之间嵌入几个"块"（在这种情况下使用Flex），具有以下结构：

• 父（jsfiddle中的蓝色）
  • 容器：边距顶：32px，（红色）
    • row1：橙色（150 px高度，宽度：100％）
    • row2：紫罗兰

以下代码示例中说明了这一点：

jsfiddle示例1-不工作

我希望"所有嵌入式"divs具有指定的高度（例如橙色div/Row1的150px），或在其父容器内采用所有"剩余"高度。但是正如您在JSFIDDLE中看到的那样，它行不通：Row2没有所需的高度。

我知道，只有父母的身高才能设置为100％。如果我在container上这样做，因为容器的margin-top设置为32px，container和row2具有parent的高度，并且在父母的底部边界上绘制。这在JSFIDDLE的叉子中显示了：

JSFIDDLE示例1-不使用高度：100％在容器上

我该如何解决？什么是正确的方法？

Answer 1

这里的两个主要内容是从 .board_divider_bottom中删除 height: 100%，然后向其添加 flex-grow: 1，在其中 flex-grow: 1将其提供可用的空间。

html, body {
  margin: 0;
}
.parent {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  border: 3px solid blue;
}
.board_container {
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  box-sizing: border-box;
  width: 100%;
  margin-top: 32px;
  height: calc(100% - 32px);          /*  changed, reduce with margin-top  */
}
.board_divider_top {
  border: 2px solid orange;
  box-sizing: border-box;
  width: 100%;
  height: 150px;
}
.board_divider_bottom {
  flex-grow: 1;                     /*  added, fill remaining space  */
  border: 2px solid violet;
  box-sizing: border-box;
  width: 100%;
}

<div class="parent">
  <div class="board_container">
    <div class="board_divider_top"></div>
    <div class="board_divider_bottom">I want this to take all the remaining height</div>
  </div>
</div>
<!-- parent -->