Flexboxes、Chrome和意想不到的滚动条

Question

我像这样使用灵活的布局：

​

/* VBOX */
.vbox {
    background-color:gray;
    border:4px solid black;
    box-sizing:border-box;
    flex:none;
    flex-flow:column nowrap;
    display:flex;
    overflow:auto;
}
.vbox>.stretched {
    flex:1 0 auto;
}

/* HBOX */
.hbox {
    background-color:red;
    border:4px solid darkred;
    box-sizing:border-box;
    flex:none;
    flex-flow:row nowrap;
    display:flex;
    overflow:auto;
}
.hbox>.stretched {
    flex:1 0 auto;
}

/* ITEM */
.item {
    background-color:lightblue;
    border:0.25em solid blue;
    box-sizing:border-box;
    flex:none;
    height:2em;
    width:7em;
}

<div class="vbox" style="width:10em;height:10em;">
    <div class="hbox">
        <div class="item"></div>
    </div>
    <div class="hbox stretched">
        <div class="item"></div>
    </div>
    <div class="hbox">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

​

与IE和FireFox不同的是，Chrome在最后一个水平容器上添加了一个垂直滚动条(似乎水平滚动条的高度没有考虑在内)。http://jsfiddle.net/31dLqdms/8/如何只使用CSS来解决这个问题？

提示：

下面的脚本，切换"flex“CSS-property，似乎解决了这个问题(但是框的内容会动态改变，所以它不是一个解决方案) http://jsfiddle.net/31dLqdms/11/：

var items = $('.hbox:not(.stretched)');
setTimeout(function () {
    items.addClass('stretched');
    setTimeout(function () {
        items.removeClass('stretched');
    }, 500);
}, 500);

Answer 1

好了，现在我明白你的意思了。我能解决这个问题的最接近的方法是：http://jsfiddle.net/31dLqdms/9/

css：

.vbox {
    background-color:gray;
    border:4px solid black;
    box-sizing:border-box;
    flex:none;
    flex-flow:column nowrap;
    display:flex;
    overflow:auto;
}
.test{
    overflow-x:scroll;
    background-color: darkred;
}

html：

<div class="test">
    <div class="hbox">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

关于浏览器如何处理滚动条，我不认为可以做太多的事情，所以我所做的就是将hbox的溢出设置为可见，然后将其包装在一个容器div中，该容器div将溢出设置为滚动。这样滚动条就会出现在容器div上，而不是hbox上。

(然后我在背景颜色上遇到了问题，我用css修复了这个问题)。

这更像你要找的东西吗？