Flexbox and Internet Explorer 11 (display:flex in ?)

by

According to http://caniuse.com/#feat=flexbox:

“IE10 and IE11 default values for flex are 0 0 auto rather than 0 1 auto, as per the draft spec, as of September 2013″

So in plain words, if somewhere in your CSS you have something like this: flex:1 , that is not translated the same way in all browsers. Try changing it to 1 0 0 and I believe you will immediately see that it -kinda- works.

The problem is that this solution will probably mess up firefox, but then you can use some hacks to target only Mozilla and change it back:

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

Since flexbox is a W3C Candidate and not official, browsers tend to give different results, but I guess that will change in the immediate future.

If someone has a better answer I would like to know!

More Related Contents:

  1. Flexbox alternative for IE9
  2. Why don’t flex items shrink past content size?
  3. Targeting flex items on the last or specific row
  4. Can’t scroll to top of flex item that is overflowing container
  5. Fill the remaining height or width in a flex container
  6. How to vertically align text inside a flexbox?
  7. Equal height rows in a flex container
  8. How to specify line breaks in a multi-line flexbox layout?
  9. How to Right-align flex item?
  10. How to remove the space between inline/inline-block elements?
  11. How to add 1px margin to a flex item that is flex: 0 0 25%?
  12. flex container min-height ignored in IE
  13. Keep the middle item centered when side items have different widths
  14. Maintain image aspect ratio when changing height
  15. float does not work in a flex container
  16. How can I have two fixed width columns with one flexible column in the center?
  17. How can I make my flexbox layout take 100% vertical space?
  18. Is there a way to remove a div but keep its elements?
  19. CSS grid – maximum number of columns without media queries
  20. Fallback for CSS attributes without unit
  21. Make flex items overlap
  22. 5 items per row, auto-resize items in flexbox
  23. Aligning elements left and center with flexbox
  24. Flexbox, z-index & position: static: Why isn’t it working?
  25. Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
  26. Why are some of my CSS rules not working?
  27. Extra space under textarea, differs along browsers
  28. header/footer/nav tags – what happens to these in IE7, IE8 and browsers than don’t support HTML5?
  29. Make flex container take width of content, not width 100%
  30. How to make input autofocus in internet explorer?

Leave a Comment