html - 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;
}

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

观察一些事情；

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

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

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

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

(2) 与黄框碰撞时:

(3) 与黄框碰撞后:

这是怎么回事？有没有一种方法可以修复它，使行为保持一致，并且第 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>