css - 可变宽度包装器内的 Chrome/Firefox 内联 block 。 Firefox 不改变宽度

Question

This is the jsFiddle for this problem .

在 Chrome 39.0.2171.95(64 位)(Mac) 上更改宽度会使黑色方 block (.Selector-item) 隐藏为 .Selector-viewport元素改变宽度。如下图所示:

但是，在 Firefox 34.0.5 (Mac) 上，右列被插入，溢出框架并且不改变 .Selector-viewport 元素的宽度:

我如何确保 Chrome 表现出的相同行为在所有浏览器中保持一致？

代码

HTML

<div class="Columns">
    <div class="Column-1">
        <div class="Selector">
            <div class="Selector-viewport">
                <div class="Selector-wrapper">
                    <div class="Selector-item"></div>
                    <div class="Selector-item"></div>
                    <div class="Selector-item"></div>
                    <div class="Selector-item"></div>
                    <div class="Selector-item"></div>
                    <div class="Selector-item"></div>
                    <div class="Selector-item"></div>
                    <div class="Selector-item"></div>
                    <div class="Selector-item"></div>
                    <div class="Selector-item"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="Column-2">
        <p>Column 2</p>
    </div>
</div>

CSS

.Columns {
    display: flex;
}
.Column-1 {
    flex: 1 1 66.6667%;
    background: red;
}
.Column-2 {
    flex: 0 0 100px;
    background: blue;
}

.Selector {
    position: relative;
    padding: 10px 58px;
    border: 1px solid black;
}
.Selector-viewport {
    position: relative;
    overflow: hidden;
    padding: 10px;
    border: 1px solid black;
}
.Selector-wrapper {
    white-space: nowrap;
    position: relative;
    display:inline-block;
    padding: 10px;
    border: 1px solid black;
}
.Selector-item {
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 60px;
    white-space: normal;
    border: 1px solid black;
    background: black;
}

谢谢

注意:我不能让元素 float 并环绕在两行上。他们需要在一条线上。

Answer 1

Flex 模型在浏览器中的支持仍然有限，可能会导致不良结果。

我已经使用如下定位将 flex 模型更改为相对模型。这应该可以解决您的问题。

DEMO

尝试为您希望溢出的元素添加宽度:

.Columns {
    position:relative;
}
.Column-1 {
    margin-right:100px;
    background: red;
}
.Column-2 {
    position:absolute;
    top:0;
    right:0;
    height:100%;
    width:100px;
    background: blue;
}

要使其可变，请使用百分比或最小/最大宽度。