为什么 flex 内容会影响 Chrome 和 IE 中 flex 之外不相关元素的位置?

Question

我注意到flex内容的一些意外布局行为，即它会影响页面上不相关元素的位置。

场景：我里面有div.container 和div.content。div.container 的显示设置为内联柔性，并垂直居中div.content。

现在，我放在容器之后的任何内容(使用常规流)都不能高于div.content 的顶部。

当我在div.container 之后添加一些自由文本时，它与div.content 顶部对齐，即使它完全在 flex 容器之外并且应该与它无关。

当我添加另一个div.container 时，它的定位方式是它的div.content 不高于上一个不相关的div.container 的div.content。这个容器(或者更确切地说是它的div.content)反过来会影响后续容器的位置。

https://flex-content-affects-outside.stackblitz.io/

看起来好像div的顶部不能放置在文档流中它之前的div 顶部之上。

就我而言，这不会直接影响内联柔性容器，而是影响它们的内容。弹性容器的垂直位置(如果因此受到影响)，以便其内容对齐。

此行为在 Chrome 和 IE11 中可见。另一方面，在Firefox中，一切都按预期工作。

我的问题是：是什么导致了这种行为？它是否以任何方式标准化？

在上面的例子中，这不是一个大问题，我们可以将所有盒子包装在另一个 flex 中以获得预期的行为。但是，我担心在更复杂的布局中，看似独立的内容之间的一些意想不到的关系可能会破坏布局。

编辑：我正在添加一个代码片段。

.container {
font-size: 30px;
margin: 10px;
width: 200px;
height: 200px;
border: 1px solid #888;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.container .content {
width: 100%;
text-align: center;
background: rgba(200, 200, 200, 0.5);
}

<div class="container">
<div class="content">
Content.
</div>
</div>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>

Answer 1

正如Paulie_D在评论中注意到的那样，这是由垂直对齐引起的。一旦我们指定垂直对齐：顶部一切都按预期工作。

.container {
font-size: 30px;
margin: 10px;
width: 200px;
height: 200px;
border: 1px solid #888;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
vertical-align: top;
}
.container .content {
width: 100%;
text-align: center;
background: rgba(200, 200, 200, 0.5);
}

<div class="container">
<div class="content">
Content.
</div>
</div>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>

或者，更详细的一个：

https://stackblitz.com/edit/flex-content-affects-outside-baseline-elwwvc?file=style.scss

更准确地说，布局是由于隐含的垂直对齐：基线(在Chrome和IE中)。盒子是内联柔性的，并根据基线进行布局。一旦我们明确指定了这一点，浏览器之间的行为是一致的。其中一个框中的另一个字体大小使其更明显。

https://stackblitz.com/edit/flex-content-affects-outside-baseline?file=style.scss