Flexbox item not working in IE11

[pepe_lepew]

Hello:

I am having a problem with my flex template under IE11, works fine in Chrome and FF. When I shrink the browser below 800px, 1 of the divs does not show up at all ( sunk_Slim ). I made this so that when the screen shrinks I can have 2 items in a row, so if there is another way, please let me know. I have put a red border around the problem.

On a side note, the button I have ( sunk_Knob, which has a yellow border ) takes up 100% of the row, which I am trying to avoid. Is the only way to do this with a div within it?

Here is the codepen snippet:
http://codepen.io/lepew/pen/MaLaGg

[gcyrillus]

make it simple and reset the display:flex property to block.
http://codepen.io/anon/pen/OydjqP?editors=010

If you do need the flexbox model in this case, then see to reset the flex properties of first-level child ;)

[Author]

Posts