相关疑难解决方法(0)

这个问题关系到这两个:
1.CSS -应用填充与滚动框,底部填充不起作用
2. 底部填充,溢出的元素上不工作在非Chrome浏览器,

但我没有找到它为什么会发生的任何地方,这意味着,为什么在Chrome(31)和Opera(18)中出现了填充,而在Firefox(26)和IE(9-10)中却没有.

这是我的测试用例:http:
//jsfiddle.net/eW39h/4/

相关问题#1中的一个更简单的例子:http:
//jsfiddle.net/rwgZu/

<div id="container">
    <div id="innerBox"></div>
</div>

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#innerBox{
    height: 400px;
    background: #000;
}

我不是在寻找修复,而是要了解正确的实现究竟是什么(以及哪些浏览器错了:-)).

编辑 2013年12月18日

根据Marc Audet的回答,我挖掘了规范并制作了一个新的测试用例.
http://jsfiddle.net/rwgZu/79/

这里显而易见的是,所有浏览器都在同一点剪切溢出框,这是填充边缘",这确实符合规范:

每当发生溢出时,'overflow'属性指定是否将框剪切到其填充边缘

而且,在Chrome中,内盒后面还有一个额外的填充物.

有趣的是,在内部框中添加溢出的内容会在所有浏览器上产生统一的结果:http:
//jsfiddle.net/uPY8j/1/

我在规范中找不到这种条件的规则,所以我现在仍然要问这个问题.

我有一个CSS3 flexbox的问题.

如果我将flexbox元素overflow设置为并min-width为子元素设置值,则父元素上的右边填充将丢失？这在所有支持浏览器上都是一致的.

这是一个错误的例子.如果滚动到容器的右侧,您将看到最后一个孩子难以抵靠容器的右边缘,而不是遵守填充值.

.outer {
    display: flex;
    flex-direction: row;
    width: 300px;
    height: 80px;
    border:1px #ccc solid;
    overflow-x: auto;
    padding: 5px;
}
.outer > div {
    flex: 1 1 auto;
    border: 1px #ccc solid;
    text-align: center;
    min-width: 50px;
    margin: 5px;
}

<div class="outer">
    <div>text1</div>
    <div>text2</div>
    <div>text3</div>
    <div>text4</div>
    <div>text5</div>
    <div>text6</div>
    <div>text7</div>
    <div>text8</div>
    <div>text9</div>
    <div>text10</div>
</div>

有谁知道这是为什么以及如何纠正它？我搞砸周围padding,并margin在没有成功不同的组合值.