4

I am using Flexbox for a series of content blocks. The idea is to have blocks in a flex container whose height will be determined by the total of the flex items within it. This is working well on Chrome and Safari as it calculates the container height automatically and correctly, but the same does not happen on Firefox + IE. My CSS looks like this:

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  .primary {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    margin-bottom: 10px;
   -webkit-box-flex: 1;
   -webkit-flex: 1 0 100%;
   -ms-flex: 1 0 100%;
   flex: 1 0 100%;
  }
  .secondary {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 28.10026385%;
    flex: 2 1 40%;
    margin-left: 10px;
    }      
}

Essentially, the padding-top: 28.1% decoration is for a background image set as an inline style. On chrome + safari, this calculates the height just fine. However, the container's height is not set up on IE + FF. I have tested all my browser prefixes and checked a lot of questions, but I'm a bit lost on why the height is calculated differently. If anyone has any suggestions that would be excellent. Setting a min-height on the blocks is not an option, as we will have varying sizes of blocks, so we don't want to constrain ourselves to a fixed or min height. Short version: is there a difference in how Firefox + IE calculate height of flex containers and items? If so, what is the best way to get it to behave like Safari + chrome? Here is a contrived example: http://codepen.io/anon/pen/NGjYGR

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
johnnyutah
  • 685
  • 1
  • 7
  • 23
  • 1
    Can you include the HTML in your question? Or a demo? Can't replicate the problem with just the CSS. – Michael Benjamin Oct 06 '15 at 18:58
  • @Michael_B good point, attached one that works in chrome+safari but not firefox + ie. Thanks! – johnnyutah Oct 06 '15 at 19:20
  • The problem I'm having is that the code is unclear and convoluted. You have a flex container with three flex items. Each flex item is relatively positioned (for reasons that aren't clear). Nested in each flex item is an absolutely positioned `div` with an image having either `padding-top: 56.25%` or `padding-top: 28.1%`. The absolutely positioned divs are also flex containers. Then you have an outer `div` container wrapping the `.container` that lacks a clear purpose. This may all be clear to you, but from my perspective it's difficult to understand. I gave it a shot. Sorry I couldn't help. – Michael Benjamin Oct 07 '15 at 01:27
  • You wrote: *I'm a bit lost on why the height is calculated differently.. is there a difference in how Firefox + IE calculate height of flex containers and items?* My answer here may offer you some guidance: http://stackoverflow.com/a/32948440/3597276 – Michael Benjamin Oct 07 '15 at 01:31
  • You wrote: *However, the container's height is not set up on IE + FF.* My answer here may help: http://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Oct 07 '15 at 01:33
  • 1
    The use case is a div with a background image element then a text overlay on top, so we use relative positioning for the outer element then absolute positioning for the overlay so we can put it right where we want. We wound up ditching flexbox for this use case for now since the behavior is too unpredictable across browsers. – johnnyutah Oct 07 '15 at 03:02

1 Answers1

-2

I'm noticing a few potential issues with the code you're referencing. Also, without full context of the referenced code—missing HTML—recommendations are based on the assumption that your HTML is structured in the following manner:

.container
  .primary
    .secondary

No height set on .container

If dimensions aren't set on this element how are the dimensions calculated for the children elements (i.e.: "28.1%" of ?) ?

There are many known issues with certain browser implementations of the flex specification

There are known issues with implementations flex-basis, and height calculations. Here is a comprehensive article on browser nuances on flex: here.

References:

Normalizing Cross-browser Flexbox Bugs: http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

pygeek
  • 7,356
  • 1
  • 20
  • 41