Chrome上的滚动条和Flexbox最小宽度错误

debugcn 发表于 Dev

克万伯伦登克

我在滚动条与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）与黄框碰撞后：

在此处输入图片说明

这是怎么回事？有没有一种方法可以修复它，使行为保持一致，并且第三框是黄色框与红色框接触时显示的框？

贴纸

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。