Clever Geek Handbook

Vmax module not working in IE

I'm trying to use vmax with flex, but it doesn't work in IE, not even in ie11

here's the DEMO link

CSS

.container{ border:1px solid red; display:flex; }
.container div{border:1px solid green;flex: 0 0 48vmax;}

Html

<div class="container">
   <div>a</div>
   <div>b </div>
</div>

Thank you in advance

+3


source to share


3 answers


I think you can get around the vmax support issue by adding media queries to your css. Since vmax is equal to the highest of vw and vh, you just need to use these two units like this:

@media (orientation: landscape) { 
   .container div{border:1px solid green;flex: 0 0 48vw;} 
}

@media (orientation: portrait) {
    .container div{border:1px solid green;flex: 0 0 48vh;}
}

You can see what I used:



vw for landscape orientation, since in landscape the viewport is wider than its height.

vh for portrait orientation, since in portrait the height of the viewport is greater than its width.

+3


source


The problem is not related to using flexbox. If you check canIuse you will see that IE only partially supports view units and you can read:

All other partial support refers to the fact that the "vmax" block is not supported.



IE doesn't support elements yet vmax

.

+2


source


Just use vm instead of vmax, i.e.

-3


source






More articles:


All Articles