Skip to content

Instantly share code, notes, and snippets.

@nemzes
Created September 18, 2014 06:47
Show Gist options
  • Save nemzes/aa698acca35c8c235de2 to your computer and use it in GitHub Desktop.
Save nemzes/aa698acca35c8c235de2 to your computer and use it in GitHub Desktop.
Modernizr test for flexbox min-height bug (which exists in IE 11)
// Modernizr test for flexbox bug when using min-height
// See https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview
// This will then fix it in IE:
//
// .container {
// display: flex;
// flex-direction: column;
// min-height: 100vh;
// }
// .flexboxbug .container {
// height: 100vh;
// }
var flexboxMinHeightCss;
flexboxMinHeightCss = '#modernizr{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;min-height:10px;color:blue;} ';
flexboxMinHeightCss += '#modernizr :first-child{-webkit-flex:1;flex:1;color:red;}';
Modernizr.testStyles(flexboxMinHeightCss, function(elem, rule) {
Modernizr.addTest('flexboxbug', elem.firstElementChild.offsetHeight !== 10);
}, 2);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment