0

Trying to create a fluid centered content area with a defined max-width and a equal height sidebar with flexbox for a wordpress theme. Thing works like a charm in Safari, Firefox and Chrome but completely goes apeshit in explorer.

Working Example (in safari, fire... etc)

http://nicklasbryntesson.se/test/Flexbox%20Vs%20Table/layout-flex.html

the basic structure for the content area:

<header id="masthead" class="site-header" role="banner">
  <h1>Header</h1>
</header><!-- #masthead -->


  <div id="content" class="site-content">

    <div id="primary" class="content-area">
      <main id="main" class="site-main" role="main">

        <article>

          <h1>The Content</h1>

        </article><!-- #post-## -->

      </main><!-- #main -->
    </div><!-- #primary -->

    <div id="secondary" class="widget-area" role="complementary">

      <h2 class="widget-title">Sidebar</h2>

    </div><!-- #secondary -->

  </div><!-- #content -->

<footer id="colophon" class="site-footer" role="siteinfo">
  <h1>footer</h1>
</footer>

The basic CSS for Wide screens:

@media screen and (min-width: 50em) {

.site-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.site-main {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}
.widget-area {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 18em;
            flex: 0 0 18em;
}
.content-area {
    max-width: 40em;
    height: 100%;
    margin: 0 auto;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

}

Im ready to throw in the towel on this, can't seem to figure out if there is a prefix error, or if I'm targeting the wrong divs.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
nicklas bryntesson
  • 149
  • 1
  • 3
  • 12
  • 1
    We don't care what it looks like on your site. Provide a [mcve] here -- you might be interested in using [Stack Snippets](https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) to do that. That way, we don't need to visit an unknown URL that could, say, be a vector for malware. – Nic Feb 23 '17 at 18:42

2 Answers2

2

Remove flex: 1 (and prefixed equivalents) from #primary.content-area.

IE, which is full of flex bugs, doesn't like it. It's removal should have no impact on other browsers.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • If i Remove that property, if i have very little content it does not span the entire width (up to the max-width) – nicklas bryntesson Feb 23 '17 at 20:56
  • So the box is supposed to expand to the `max-width` (40em), even when there is little or no content? – Michael Benjamin Feb 23 '17 at 21:07
  • Yes, that is the desired behaviour. Just realized when looking at my wordpress theme files, that the
    has a set of dynamically set classes for every post/page but also a global .hentry class. Thinking of targeting that and see if i can get the
    to span the full width of its available space?
     – nicklas bryntesson Feb 23 '17 at 21:57
  • If the width is always supposed to be 40em, then you don't need `max-width`. Just use `width: 40em`, remove `flex: 1`, and you should be all set. – Michael Benjamin Feb 23 '17 at 21:59
  • My thinking was that i needed to use max-width so that it filled all the available space up to 40em, i thought that a set width would give me problems on smaller screens, will try this in all browsers tomorrow, thank you for your help! – nicklas bryntesson Feb 23 '17 at 22:08
0

This is because IE in particular has problems with intrinsic sizing with flex children. Not really related to vendor prefixing (in fact, unless you need to support old android-native browsers or old Safari, you don't need vendor prefixing any more)

First check out flexbugs to see if your issue is there. But, I'd also make these recommendations:

.site-content {
   display: flex;
   justify-content: space-between;
}

.content area {
  max-width: 40em; 
  display: flex;
  margin: 0 auto;
}

I don't recommend using margin:auto with flexbox children. I have just learned that margin:auto is flexbox, but I'd recommend using flex properties explicitely: declare individual properties, rather than shorthand; set explicit margins, rather than auto. it makes for more readable and direct code.

paceaux
  • 1,762
  • 1
  • 16
  • 24
  • From the question: *Trying to create a fluid centered content area...* I presume that's why he used `margin: 0 auto`. By removing it, the section is no longer centered. – Michael Benjamin Feb 23 '17 at 19:27
  • I understand that, but that's also part of the problem. If you want a fluidly centered layout, you should use flexbox to do that, rather than margin: auto. – paceaux Feb 23 '17 at 19:30
  • 1
    Well, I just learned something. I'm upvoting your answer, BTW. works. the best and it's the most effective solution. – paceaux Feb 23 '17 at 19:41
  • 1
    You might appreciate this post, which covers flex `auto` margins with examples: http://stackoverflow.com/q/32551291/3597276 – Michael Benjamin Feb 23 '17 at 19:44