Css IE10/11中带Calc（）的过渡高度

在我们开始之前，我想说我已经看过了，但我的问题是关于这个问题的公认答案

现在，这个被接受的答案肯定能在IE11和我测试过的其他浏览器上运行，但是在我创建的webapp上，我只需要转换Div的高度，而不是宽度。因此，我重新创建了可接受的答案解决方案，将

最大宽度

更改为

最大高度

，但这似乎与高度仍然不会转换的方式不同

以下是我修改后的公认答案：

---

为什么在这种情况下，“最大高度”的性能与“最大宽度”不同？我错过了什么吗？在IE10/11中有没有一种解决高度转换的方法？

所以我昨天和今天花了一些时间尝试了多种纯CSS解决方案，但都没有用。最后，我决定只使用JQuery动画功能来实现我的目标，这在IE中非常有效

下面是一把小提琴，展示了解决方案：

我没有在CSS中使用calc（）来计算高度，而是让JQuery来处理这个问题

---

如果有人能找到一个纯CSS解决方案，请发布它，我会接受它作为答案。

所以我昨天和今天花了一些时间尝试了多个纯CSS解决方案，但都没有用。最后，我决定只使用JQuery动画功能来实现我的目标，这在IE中非常有效

下面是一把小提琴，展示了解决方案：

我没有在CSS中使用calc（）来计算高度，而是让JQuery来处理这个问题

如果有人能找到一个纯CSS的解决方案，那么请张贴它，我会接受它作为一个答案

.container{
  height: 100px;
  width: 200px;
}

.block {
    width: 100%;
    height: 100%;
    background-color: red;
    transition: all 1s ease-in-out;
    margin: 10px;
    padding-left: 10px;
}

.doesntwork:hover {
    max-height: 50%;
    height: 100%;
}
.works:hover {
    height: 175px;
}

function startAnim(){
    if(!$('.block').hasClass("shrunk")){
    $('.block').addClass("shrunk");
    $('.block').animate({ 'height': '50%' }, 500);
  }
  else{
    $('.block').removeClass("shrunk");
    var height = ($('.block').height() * 2) - 10;
    $('.block').animate({ 'height': height }, 500);
  }
}