IE9錯誤計算DOM更新的最小高度與溢出設置

Question

我遇到了什麼似乎是一個非常具體的錯誤在IE9佈局渲染，其中box-sizing: border-box和min-height的div的高度計算不正確，當內容是調整大小。

考慮下面的標記和CSS：

<div class="constrained"> 
    <div class="content">Content</div> 
</div> 

* { box-sizing: border-box; } 
.constrained { 
    border: 1px solid blue; 
    min-height: 300px; 
    padding: 10px; 
    overflow-x: auto; 
} 

的div.constrained在適當高度300像素（278px內部高度），頁面加載時呈現。當通過JavaScript將新內容注入div.content時，div.constrained容器增長到322px高度，就好像不再應用框尺寸。

的jsfiddle示範： http://jsfiddle.net/eafztwb2/16/

這僅與auto，visible或scroll溢出值，就會發生。將overflow-x設置爲hidden或inherit（只要繼承不會最終評估爲前者）就不會顯示問題。

這不是一個問題，而是知識共享，但我會對解決方案感興趣，同時仍然允許overflow-x: auto。

Answer 1

這絕對看起來像一個佈局錯誤，但幸運的是解決方法非常簡單。將height與min-height一起應用於您的元素。例如：

.constrained { 
    height: 100%; 
    min-height: 300px; 
} 

該問題也存在於Internet Explorer 10中。此解決方案適用於IE 9和10. Internet Explorer 11似乎已經自行解決了這個問題 - 我無法在那裏重現問題。

小提琴：http://jsfiddle.net/eafztwb2/23/