7
我正在處理一個項目，並使用display：table and table-row with overflow auto。但在Firefox（和IE）中沒有預期的那樣。display：table-row＆overflow：在Chrome，Firefox（和IE）中自動顯示不同的行爲
在Chrome中，它表現得應該如此。
There's this問題在StackOverflow，這似乎很相似我的問題，但沒有答案或樣品給出。
我試圖重現這在JSbin和小提琴，但沒有奏效。
爲了說明在Chrome和Firefox的我已經做了兩個screengrabs行爲：
我還建立了一個小規模的HTML例子，可以發現here 。您可以通過在Chrome和Firefox中打開網站並擴展textarea，直到底部容器溢出頁面來進行復制。
代碼
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.tableWrapper {
display: table;
height: 100%;
background: darkgrey;
table-layout: fixed;
width: 800px;
margin: 0 auto;
}
.textArea {
background: #F9F9F9;
padding: 10px 10px 5px 10px;
margin: 10px;
}
.content {
display: table-row;
height: 100%;
margin: 10px;
}
.content div {
display: block;
overflow: auto;
height: calc(100% - 20px);
height: -webkit-calc(100% - 20px);
height: -moz-calc(100% - 20px);
background: #ADE6DF;
margin: 10px;
}
.content p {
background: white;
margin: 10px;
padding: 5px;
}<div class="tableWrapper">
<div class="textArea">
<textarea></textarea>
</div>
<div class="content">
<div>
<p>
Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
</p>
<p>
Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
</p>
</div>
</div>
</div>這是非常令人沮喪，我希望有人知道發生了什麼。
我不知道某些如果它有什麼關係正在發生各地保持佈局在一起（.textArea住在一處匿名錶盒的事實在.tableWrapper中的匿名錶格中的匿名錶格單元格，以及.content div位於.content中的匿名錶格單元格中）。 – BoltClock
@BoltClock你有一個想法如何解決這個問題？ –
@Patrick Hofman：不好意思。 – BoltClock