vmax单元在IE中不起作用

Question

我正在尝试使用带弹性的vmax，但即使不是在ie11

here is 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>

提前致谢

Answer 1

我认为您可以通过在css中添加媒体查询来绕过vmax支持问题。由于vmax等于vw和vh之间的最高值，所以你只需要使用这两个单位，而不是这样：

@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;}
}

你可以看到我使用过：

vw 用于横向，因为在横向中视口宽度高于其高度。

vh 用于纵向方向，因为在纵向中，视口高度高于其宽度。

Answer 2

该问题与flexbox的使用无关。如果您检查canIuse，您可以看到IE仅支持视口单元，您可以阅读：

  

所有其他部分支持指的是不支持“vmax”单位。

IE尚未支持vmax个单元。

Answer 3

Simply use vm instead of vmax in ie.