Flexbox的模型不產生父容器

的100％高度使用下面的CSS：Flexbox的模型不產生父容器

#menusidebar { 
    background-color: #6BC9DB; 
    margin: 0 0 0 0; 
    height: 100vh; 
}

的this page左側欄中沒有達到它的父容器#content-wrap的底部。

更新：我使用柔性盒模型的嘗試：

.flex { 
    display: -webkit-flex; 
    display: flex; 
    flex-grow: 1; 
} 

<div id="content-wrap" class="fluid clearfix flex" data-content="content"> 
    <aside role="complementary" class="two columns" id="menusidebar">

但撓性元件#menusidebar的孩子不佔用柔性父#content-wrap的所有剩餘空間。

來源

2016-06-12 Steve

'100vh'是瀏覽器視口的高度，而不是父容器的高度。 – Aziz

使用'100％'給它的父母身高..這假設你的父母有一個不是百分比的身高，如果不是，所有的父母都需要百分之一直到html/body – LGSon

Hi @LGSon。我將高度改爲'100％'，邊欄高度從100vh時開始減少。：P – Steve

這是給你一個開始，使用您的樣品鏈接

Fiddle demo

，我改變了這些規則與Flexbox的戰略

#content-wrap { 
    background-color: #FFF; 
    margin: 0; 
    display: flex; 
} 
.column, .columns { 
    display: inline; 
    flex: 1; 
    margin-left: 10px; 
    margin-right: 10px; 
} 
#menusidebar {background-color: #6BC9DB; margin: 0 0 0 0;}

來源

2016-06-12 06:28:07 LGSon

Thanks LGSon。我做了這些改變，問題解決了。但是，有一個新問題：'.two.columns {width：172px;}'不再適用於'

@Steve使用'flex-basis：172px'，而不是'width：172px'等等...... – LGSon

非常感謝LGSon。 – Steve

棒，作爲一個是最具前瞻性的。以下樣式添加到容器：

align-items: stretch;

脫下的子元素（特別是#menusidebar）設置的任何高度。

來源

2016-06-12 12:14:14 JeffreyPia

Flexbox的模型不產生父容器

回答

相關問題