chrome上的滚动条和flexbox min-width错误

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）与黄箱碰撞后：

发生了什么事？有没有办法可以解决它，所以行为是一致的，第3帧是黄色框与红色框接触时显示的那个？

Answer 1

你可以这样做，看起来效果很好。

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

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

或者，将其设为非弯曲，请注意应用于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>