Question

这是我的苗条和sass代码。我需要将flex-container或flex-item的高度设置为父div的100％（flex-primary-content），你可以看看它现在在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将占据整个高度/宽度。

代码段（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的高度

1 个答案: