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 像素的高度（278 像素的内部高度）适当呈现。当新内容通过 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/