首页 文章

内部flexbox 100％父div的高度

提问于
浏览 次
2

这是我的苗条和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
html css html5 css3 flexbox

1 回答

  • 0

    让 flex-primary-content 成为flexbox容器 . 由于 flex-container 充当灵活父级 flex-primary-content 的子级，因此设置 flex-grow: 1 将占据整个高度/宽度，具体取决于弹性方向 .

    Code snippet(CSS version) ：

    .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

    回复于

相关问题