3

Why does Firefox cut off text in the flexbox layout, while Chrome does not? Is this a bug in Firefox?

I already know how to fix this bug so Firefox acts like Chrome: simply set .content to flex: auto, which implicitly sets flex-basis to auto instead of 0. Alternatively, setting min-width: 0 or overflow-x: hidden also works. But I want to know why.

I noticed that Firefox seems to use the really long <pre> tag to set the width for the entire container div, while Chrome does not. But this only happens during flexbox. If there is no pre tag with long text in it, there is no bug.

Here's the Codepen. Resize it horizontally to see the difference between flexbox and not flexbox. I set a breakpoint to turn off flexbox when really narrow.

HTML:

<!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> <!-- END .container -->
        </div> <!-- END .content -->
</div> <!-- END .main -->
</body>
</html>

recreate_bug.css:

body {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: #46545C;
}

h1 {
    font-family: 'Ubuntu', 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 36px;
}

pre {
    font-family: 'Source Code Pro', monospace;
    font-size: .85em;
    color: #EEEEEE;
    background: #333333;
    overflow: auto;
    padding: 12px 18px;
}

.container {
    margin: 0 auto;
    padding: 0 18px;
}

.container-main {
    overflow: hidden;
    background: #b2a0e8;
}

.flexbox {
    display: none;
}

/* Media Queries */
/* ---------------------------- */

/* Large Size */
@media screen and (min-width: 40em) {

    .container-main {
        display: flex;
        background: #CADBD6;
    }

    .container {
        margin: 0 50px;
    }

    .content {
        flex: 1;
        /* Comment out this width, and Chrome displays the same functionality */
        width: 80%;
        /* This width has the same effect */
        /*width: calc(100% - 360px);*/
        float: right;
    }

    .flexbox {
        display: block;
    }
}

Here is an image of what the cutoff looks like:

Firefox cuts off text with Flexbox

Thanks!

Hintron
  • 311
  • 2
  • 11
  • I think the min-width is very telling here... it's acting as if the default `
    ` value for `min-width` is `min-content`
     – Olex Ponomarenko Jun 22 '18 at 23:05
  • @OlexPonomarenko but the pre is not a flex item, its parent is the flex item – Temani Afif Jun 22 '18 at 23:41
  • 1
    The **solution**, as you mentioned, is to set `.content` to `min-width: 0` or `overflow`, with any value other than `visible`. The **explanation** is in the duplicate post. See, in particular, the *Browser Rendering Notes* in my answer. – Michael Benjamin Jun 23 '18 at 00:29
  • 1
    *Is this a bug in Firefox?* It doesn't appear to be. Firefox is adhering to the spec. If anything, it's a bug in Chrome, except the Chrome developers appear to be *deliberately* deviating from the spec. So it's most likely an [intervention](https://github.com/WICG/interventions). – Michael Benjamin Jun 23 '18 at 00:37
  • @Michael_B Thanks for pointing me in the right direction to all your informative posts. Just a follow up, though: why does setting `flex: auto` also seem to normalize the browser differences in the same way that `min-height: 0` does? I chose the `flex: auto` approach to fix my issue for now, but it would be good to know if that is discouraged or problematic in any way (e.g. it only works because it relies on some kind of non-spec Firefox-specific functionality, but it could possibly break in future releases). Thanks. – Hintron Jun 27 '18 at 16:35

0 Answers0