Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

[CSS] flex-basis not respected in Firefox

Options
  • 18-05-2015 5:57pm
    #1
    Closed Accounts Posts: 4,763 ✭✭✭


    There is no JavaScript used to style this site, to preemptively rule out that question. There is a only single statement used to remove WordPress-inserted breaks in an inline article element.

    Here is the site in question, my personal blog: http://www.bhalash.com/

    I recently launched a rebuild of my personal blog, and just because, I've gone with flexbox all the way up. I've been bashing my head off a single problem all day: the flex-basis of the #content element is not respected by Firefox and a minimum width appears to be applied. I'm aware of a log of bugs and quirks related to flexbox cross-browser, but nothing I've found matches this particular issue.

    Expected behaviour: Content column should neatly scroll in lockstep with the fixed sidebar until it reaches the breakpoint at 1024px width and switches to a column layout. #content's width should be either 75% or 66.6% of the parent div, #site.
    Actual behaviour: Works normally above ~1300px window width. Below that #content's width remains about 80% that of the window until the 1024px breakpoint is reached. This occurs on load too; the page seems to render correctly until the DOM finishes loading, at which point it jumps from expected width to 80% width.

    Expected (Internet Explorer 11): https://i.imgur.com/hjym5FV.png
    Firefox actual (Firefox Developer Edition 40.0a2): https://i.imgur.com/qVvL75w.png

    Compiled and with webkit prefixes and breakpoints (the behaviour occurs independently of any breakpoints) removed, the CSS looks like this:
    #site.side-by-side {
        display: flex; 
        flex-direction: row-reverse;
    }
    
    #header {
        position: fixed;
        top: 0;
        right: 66.6%;
        bottom: 0;
        left: 0;
    }
    
    #content {
        flex: 0 1 66.6%;
    }
    

    #header is a sibling of #content, but #header is fixed instead of having a flexbox layout. I still had this problem after I gave #header a flex layout-#content won't go below a minimum size and #header instead moves behind it.

    TL;DR: #content seems to have an invisible min-width applied by Firefox and I can't figure out why.


Comments

  • Closed Accounts Posts: 4,763 ✭✭✭Fenster


    Uh, I guess there was an invisible min-width being applied by Firefox. I added this to the element on a chance, and now it resizes correctly:
    min-width: 0;
    

    Thanks, Obama!


Advertisement