當添加新的孩子時，防止DIV容器的高度增長

Question

我有一個以高百分比爲中心的頁面居中的動態包裝。

它內部是一個高度固定的導航欄和一個佔據剩餘空間的導航欄（導航欄減去導航欄的100％）。

我正在通過javascript向feed添加新消息。

問題：容器與新聞一起增長。 如果它具有固定的高度（如200px），則不會生長;但那不是我想要的。

這個問題讓我瘋狂，任何幫助讚賞！

看看這裏：http://codepen.io/anon/pen/vedwA

[更新]

如果我必須在#itemsContainer，而不是新聞推送一個textarea？ textarea當然也佔據itemscontainer的高度和寬度的100％，並且即使用戶經過更多文本也必須保持該大小。

在我的示例中，textarea保留在#wrapper外部，但將導航推到頂部。在codepen示例中，textarea顯示正確的行爲但不佔用100％。在無論哪種方式，它不:-( http://codepen.io/anon/pen/nGmua

**解決方案**工作

position: absolute; 
top: 50px; 
bottom: 0px; 
width: 100%; 

我們伸入容器未通過高度= 100％，但通過一個固定的頂部和底部= 0像素; 這工作只要父容器具有位置：相對;

Answer 1

這個問題似乎與默認#wrapper技術上的overflow: visible是各種形式的display: table在一起，你的新聞項目不溢出，但正在擴大表格。

該解決方案要求將overflow: hidden應用於#wrapper。但是，overflow屬性不適用於表格元素。所以，我們擺脫display: table。在下面的代碼中查看我的註釋。

希望它有幫助。

body { 
    background: #900; 
} 

div { 
    padding:0px; 
    margin:0px; 
    background: grey; 
    color: white; 
    text-align: center; 
} 

#wrapper{ 
    position:absolute; 
    width: 40%; 
    height: 50%; 
    background: red; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    border: 1px solid white; 
    /* display: table; should be block */ 
    overflow: hidden /* added */ 
} 

#navigation{ 
    top:0px; 
    height:50px; 
    width: 100%; 
    background: black;  
} 

#itemsContainer{ 
    top:20px; 
    /* width:100%; 
    height: 100%; 
    overflow: hidden; you don't need these any more */ 
    background:red; 
    /* display:table-row; should be block */ 
} 

#itemsContainer div{ 
    border-bottom: 1px dashed white; 
    padding: 1em; 
}