-1

I can't find a way to get this to work. I have a tile that has two main parts:

enter image description here

This layout works everywhere except IE11, I think because I have a nested flexbox.

The outer flexbox is as follows: enter image description here

Green is flex:1 and yellow is flex:0.

Here is the inner flexbox, which lives inside the green flexbox. It is another simple flex:1/flex:0 layout, just like the outer flexbox. enter image description here

In IE11, the inner flexbox pushes everything else off the screen: enter image description here

I need to support IE11, and I feel like I am missing a simple workaround.

Please help!

jekie
  • 441
  • 4
  • 10
  • here is my codepen: https://codepen.io/jkies00/pen/EewZyX – jekie Sep 11 '18 at 21:58
  • 1
    Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the _"shortest code necessary to reproduce it"_ **in the question itself**. See: How to create a [mcve]. – Asons Sep 11 '18 at 22:03
  • And making a sample in Codepen or Fiddle is useless when it comes to IE11, as neither work in it, a Stack snippet does work in IE11. – Asons Sep 11 '18 at 22:05
  • **What breaks your layout here in IE11 is `flex:0;`** *(what did you really mean here ? )* remove it, for the rest *(flex:1; ain't really needed for IE11 here )*, let the browser do the math itself as much as possible. too much flex kills flex . https://codepen.io/layedhere/full/xaWzXy/ If you think this answers your trouble let us know . – G-Cyrillus Sep 11 '18 at 23:07
  • regarding useless codepen, sorry, here is one that will run in IE 11: https://s.codepen.io/jkies00/debug/EewZyX/ZoMBaKLGeqLk – jekie Sep 12 '18 at 00:13
  • pen can be seen in full page in genuine IE11 . here is a screen of yours and mine side by side in IE11. https://i.stack.imgur.com/ojTai.jpg did you check mine earlier in IE11 ? – G-Cyrillus Sep 12 '18 at 01:27
  • just noticed you update yours, but the bug is still there ... (screenshot posted in ealier comment) . too much flex: xxx ; kills it ;) – G-Cyrillus Sep 12 '18 at 01:39

2 Answers2

2

IE11 requires an unit in flex-basis (3rd value of flex property) and according to source, when you set flex: 1 it actually equals to flex: 1 1 0.

Try changing each of the flex properties from flex: X to flex: X 1 auto

vicbyte
  • 3,690
  • 1
  • 11
  • 20
-1

Looking at the CanIUse page about flex, we can read:

  • IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation
    • In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
    • IE 11 does not vertically align items correctly when min-height is used see bug

Try to tweak some of your css to not face those bugs by being more specific on your flex declarations.

Bonlou
  • 472
  • 2
  • 9