内部 flexbox 父级的 100% 高度 div

Question

这是我的 sass 代码。我需要使 flex-container 或 flex-item 的高度为父级 div(flex-primary-content) 的 100%，您可以在 codepen 中查看它现在的样子：http://codepen.io/gmrash/pen/MazyaP（要求 div 带边框的虚线红色)

div class='flex-primary-container'
  div class='flex-primary-header'
    |Header
  div class='flex-primary-content'
    div class='flex-container'
      div class='flex-item'
        |flex-inner-item


.flex-primary-container
  display: flex
  flex-direction: column
  border: 3px solid black
  height: 100vh
  .flex-primary-header
    flex-grow: 0
    flex-basis: 50px
  .flex-primary-content
    flex-grow: 1
    border: 2px solid blue
    .flex-container
      display: flex
      align-items: stretch
      border: 3px dotted red
    .flex-item
      flex-grow: 1
      overflow: hidden

Answer 1

设 flex-primary-content 为 flexbox 容器。由于 flex-container 作为灵活父级 flex-primary-content 的子级，设置 flex-grow: 1 将根据 flex-direction 占用全部 height/width。

代码片段（CSS版本）:

.flex-primary-container {
  display: flex;
  flex-direction: column;
  border: 3px solid black;
  height: 100vh;
}
.flex-primary-container .flex-primary-header {
  flex-grow: 0;
  flex-basis: 50px;
}
.flex-primary-container .flex-primary-content {
  flex-grow: 1;
  border: 2px solid blue;
  display: flex;
}
.flex-primary-container .flex-primary-content .flex-container {
  align-items: stretch;
  border: 3px dotted red;
  flex-grow: 1;
}
.flex-primary-container .flex-primary-content .flex-item {
  flex-grow: 1;
  overflow: hidden;
}

<div class="flex-primary-container">
  <div class="flex-primary-header">Header</div>
  <div class="flex-primary-content">
    <div class="flex-container">
      <div class="flex-item">flex-inner-item</div>
    </div>
  </div>
</div>

Codepen Demo - SASS version

内部 flexbox 父级的 100% 高度 div

Inner flexbox 100% height of parent div

html

css

flexbox