Question

为什么Firefox为什么在flexbox布局中截断了文本，而Chrome却没有呢？这是Firefox中的错误吗？

我已经知道如何修复此错误，以便Firefox像Chrome一样：只需将.content设置为flex: auto，即可将flex-basis设置为auto而不是{{1 }}。或者，也可以设置0或min-width: 0。但我想知道 为什么 。

我注意到Firefox似乎使用了很长的overflow-x: hidden标签来设置整个容器div的宽度，而Chrome却没有。但这仅在flexbox期间发生。如果其中没有带有长文本的pre标签，则没有错误。

Here's the Codepen。水平调整其大小，以查看弹性框和非弹性框之间的差异。我设置了一个断点以在非常狭窄时关闭flexbox。

HTML：

<pre>

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>Cutoff example with Flexbox in Firefox</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"> <link rel="stylesheet" type="text/css" href="recreate_bug.css" /> </head> <body> <div class="container container-main"> <div class="content"> <div class="container">  <H1>Cutoff example with Flexbox in Firefox</H1> <p>Hello, world! This is a message that will be cut-off due to the very long pre element underneath it. Just look at it. See? It is cutting off right here.</p> <PRE> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </PRE> <p class="flexbox">(Flexbox active)</p>  </div>  </div>  </div>  </body> </html>：

recreate_bug.css

以下是截断图的图像：

谢谢！

为什么在Flexbox布局中Firefox截断文本？

0 个答案: