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属性似乎解决了问题（但是框的内容将动态更改，因此它不是解决方案）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修复的背景颜色）。

这更像你在寻找什么？

Flexbox，Chrome和意外滚动条

提示：

1 个答案: