内部柔性盒父母div的高度为100％

这是我的苗条和sass代码。我需要使flex-container或flex-item的高度为父div（flex-primary-content）的100％，您可以看看它现在在codepen中的外观如何：http://codepen.io/gmrash/pen/MazyaP（需要div加点红色）内部柔性盒父母div的高度为100％

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

来源

2015-11-13 gmrash

'高度：100％''到柔性container'做的是：HTTP：// codepen .io/Manojkr/pen/BovYGm –

没什么变化我需要点红色的div – gmrash

让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

来源

2015-11-13 12:11:24

内部柔性盒父母div的高度为100％

回答

相关问题