CSS Flexbox（網格）：Chrome中的子對象高度爲100％

Question

我使用的是flexbox網格，並且想要將項目垂直居中對齊。使用下面的代碼，它在IE和Firefox上工作，但不在Chrome上。問題是，.parent元素在Chrome中沒有100％的高度。有任何想法嗎？謝謝。

.parent { 
    height:100%; 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    background-color:orange; 
} 

.child { 
    width:100%; 
    flex: 1; 
    background-color:yellow; 
} 

...

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col"> 
    <div id="c19" class="parent"> 
    <div class="child"> 
     <h3>test</h3> 
     <p>quiate re odis rem endignam quam autempos aspel il inis as il ipsam ve aspel il inis ui utassi tem quiatent et aut occatintio. Urempel itaqui a nis aliquas velendere</p> 
    </div> 
    </div> 
</div> 

Answer 1

添加最小高度您.parent類。像下面

.parent{ 
    height:100%; 
    min-height:200px; 
} 

Answer 2

我想我找到了一個解決方案，它現在在IE，FF，Chrome的工作：

.col { 
    position:relative; 
} 

.parent { 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    top:0px; 
    right:0px; 
    background-color:orange; 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
} 

.child { 
    background-color:yellow; 
}