chrome 上的滚动条和 flexbox 最小宽度错误

Question

我遇到了滚动条与 Chrome 中的 flexbox 交互方式的怪癖问题。对我来说，它不会发生在其他浏览器上。

HTML：

<div class="outer">
    <div class="inner-left">
        <div class="one">
            <!-- content one -->
            <div style="height: 200px;"></div>
        </div>
        <div class="two" style="min-width: 400px;">
            <!-- content two -->
            <div style="height: 200px;"></div>
        </div>
    </div>
    <div class="inner-right"></div>
</div>

CSS：

html, body {
    margin: 0;
    padding: 0;
}

.outer {
    display: flex;
    flex-direction: row;
}

.inner-left {
    background-color: green;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    overflow: auto;
}

.inner-right {
    background-color: red;
    flex: 0 0 auto;
    width: 100px;
}

.one {
    background-color: orange;
    flex: 0 0 auto;
    width: 100%;
}

.two {
    background-color: yellow;
    flex: 0 0 auto;
}

现在看下面的三张图片，它们以交互方式显示了随着窗口框架向左缓慢移动直到红色框与黄色框接触时的调整大小。

观察一些事情；

• 在每个示例中，滚动条通过创建新空间或重叠现有空间来占用不同区域的空间。这意味着它会在第二帧期间与底部绿色或底部黄色区域的内容重叠。

• 第二个滚动条会暂时出现在调整大小的特定位置。

小提琴：http://jsfiddle.net/4cmoeo28/

(1)边缘与黄色框碰撞前：

(2)与黄框碰撞时：

(3)与黄框碰撞后：

发生了什么事？有没有办法可以修复它，使行为保持一致，并且在黄色框接触红色框的那一刻显示第三帧？

Answer 1

你可以这样做，看起来效果不错。

http://jsfiddle.net/4cmoeo28/1/

.inner-left {
    overflow-x: auto;
    overflow-y: hidden;
}

或者，将其作为非 flex 执行，请注意应用到 outer 的红色背景。

http://jsfiddle.net/4cmoeo28/3/

html, body {
    margin: 0;
    padding: 0;
}

.outer {
    background-color: red;
}

.outer:after {
    content: "";
    display: table;
    clear: both;
}

.inner-left {
    background-color: green;
    padding: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    width: calc(100% - 100px);
    box-sizing: border-box;
    float: left;
}

.inner-right {
    width: 100px;
    float: left;
}

.one {
    background-color: orange;
    width: 100%;
}

.two {
    background-color: yellow;
    width: 400px;
}

<div class="outer">
    <div class="inner-left">
        <div class="one">
            <!-- content one -->
            <div style="height: 200px;"></div>
        </div>
        <div class="two">
            <!-- content two -->
            <div style="height: 200px;"></div>
        </div>
    </div>
    <div class="inner-right"></div>
</div>