css - 如果 'nowrap' 的 flexbox 容器溢出，为什么移动视口(viewport)尺寸会发生变化？

Question

不出所料，如果父级具有 display: flex: 1. 有 flex-direction: row 和 flex-wrap: nowrap 并且， 2. 有任何开始宽的 child (flex-basis)并且不允许收缩(通过flex-shrink: 0)， 内容将超出父维度的边界。

如果这个 flex parent 是屏幕的宽度，浏览器通常只是尊重 'nowrap' 布局，并在视口(viewport)太小时放置一个水平滚动条。但在移动屏幕上，这并不是唯一发生的事情。窗口对其视口(viewport)大小的看法似乎发生了变化，并且它会影响页面的比例。

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

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 移动设备上剪切/粘贴/尝试，我在 fiddle 代码中包含了一个 head 标签来简化这一过程。

在 0 和 1 之间切换 .flex-child-text flex-shrink 属性会更改视口(viewport)尺寸(宽度和高度，看似成比例)。从外部容器获取位置和尺寸的页脚被甩出屏幕。安慰 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 在这种特殊情况下不锚定到实际视口(viewport)的一侧。

Answer 1

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

仍然不清楚为什么布局会以影响 y 维度的方式中断，但此修复使这不再是问题。在 this blog post 中得到了灵感