如果 flexbox 容器中带有“nowrap”的溢出，为什么移动视口尺寸会发生变化？答案

【问题标题】：Why do mobile viewport dimensions change if there is overflow in flexbox container with 'nowrap'?如果 flexbox 容器中带有“nowrap”的溢出，为什么移动视口尺寸会发生变化？
【发布时间】：2018-02-22 01:04:48
【问题描述】：

不出所料，如果父母为display: flex： 1. 有flex-direction: row 和flex-wrap: nowrap 和， 2. 是否有任何从宽 (flex-basis) 开始且不允许缩小 (通过 flex-shrink: 0) 的孩子，内容将超出父维度的范围。

如果这个 flex 父级是屏幕的宽度，浏览器通常只会尊重 'nowrap' 布局，如果视口变得太小，则会放置一个水平滚动条。但在移动屏幕上，这并不是唯一发生的事情。窗口对自己的视口大小的看法似乎发生了变化，并且超出了页面的比例。

我在一个简化的页面中重新创建了：

HTML：

<div id="container">
    <div id="flex-container">
        <div class="flex-child-text">Here's a bunch of text</div>
        <div class="flex-child-button">ButtonHere</div>
        <div class="flex-child-button">ButtonThere</div>
    </div>
    <div id="footer-bar"></div>
</div>

CSS：

#container {
    display: block;
    height: 100vh;
    background-color: lightseagreen;
}

#flex-container {
    display: flex;
    height: 32px;
    width: 100%;
    padding: 1rem 0;
    flex-flow: row nowrap;
}

.flex-child-text {
    flex: 1 0 340px;
    font-size: 20px;
}

.flex-child-button {
    flex: 0 1 auto;
    height: 1rem;
    margin: 0px 0.25rem;
    display: inline-block;
    border: solid #aaa 1px;
    background-color: #eeeeee;
    border-radius: 3px;
    padding: 0 8px;
}

#footer-bar {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 32px;
    background-color: black;
}

here it is in a jsfiddle

jsfiddle 主要是因为视觉效果很有帮助，但它无法重现错误。简单地调整窗口大小是不行的——我在 Chrome 移动模拟器中观察到并在 Android 设备上进行了验证。如果任何勇敢的读者愿意在他们自己的 Chrome 手机上剪切/粘贴/尝试，我已经在小提琴代码中包含了一个 head 标签来简化它。

在 0 和 1 之间切换 .flex-child-text flex-shrink 属性会更改视口尺寸（宽度和高度，看似成比例）。从外部容器获取位置和尺寸的页脚被扔出屏幕。安慰window.innerWidth 也证明了这一点 - 当布局被破坏时结果已经改变。

Image - All elements contained within viewport

Image - Children break out of container, bottom-right of scroll dimensions

所以要清楚，我明白为什么在第二张图片中如果滚动到绿色容器的右侧会有空白。我不明白的是：1.为什么这也会导致 y 维度像它一样发生变化，以及 2.为什么元素 position: fixed 到 bottom: 0 或 right: 0 没有锚定到实际的一侧这种特殊情况下的视口。

【问题讨论】：

你读过或知道吗：developer.mozilla.org/en-US/docs/Mozilla/Mobile/…
@LGSon 是的，我已经在头脑中处理那个元标记了。认为这可能与它有关，所以我在没有它的情况下进行了测试。如果适当调整 flex 子项的大小以脱离视口，我会观察到相同的行为。

标签： css flexbox

【解决方案1】：

将overflow: auto 添加到外部#container 使其工作。有问题的内容仍然会从 flex 容器中向右推出（并且可以滚动到），但是依赖视口锚定的元素现在又回到了原位。

仍然不清楚为什么布局会以这种方式破坏，从而影响尺寸 y，但此修复使这不是问题。在this blog post得到这个想法

【讨论】：