How can I make transition property work in IE by using calc properties?

Question

element1 {
    height: calc(100% - 50px);
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

element1:hover {
    height: calc(100% - 200px);
}

When I replace the calc in the height property by px or %, the transition works fine, but with the calc, just goes from one height to another without transition.

In other browsers it works fine, the problem is only in IE

---

Adding the code and JSFiddle example similar to my real situation.

div{
    position: fixed;
    right: 0;
    width: 250px;
    height: calc(100% - 200px);
    background: #1c8080;
    top: 158px;
    color: #fff;
    text-align: center;
    padding-top: 40px;
    font-size: 18px;
    border: 1px solid #000;
    
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

div:hover{
    height: calc(100% - 100px);
    top: 58px;
}

.bottom{
    position: absolute;
    bottom: 15px;
    width: 100%;
    font-size: 26px;
}

<div>
    <p>Height's tansition</p>
    <p>Works fine in Chrome, FF</p>
    <p class="bottom">But not in IE</p>
</div>

Yes, I know that in my case setting bottom: 0 to the <div> and only changing the height, it also works but due to the bug in IE, that only changes from one height to another one, that is why I simulated the effect, changing the top position and the height.

So, how can I simulate that kind of effect in IE?

Note: I can't use Viewport units: vh, vw.

PD: the rare behavior with IE in my case is because the transition from top: value to top: otherValue works but the transition from height: calc(value) to height: calc(otherValue) does not, this is just to guide.

Answer 1

What about this? Works like your code snippet (in my opinion), it's OK in IE10/IE11. Or I didn't understand your real situation.

html, body {
    width: 100%;
    height: 100%;
}

div {
    position: fixed;
    right: 0;
    width: 250px;
    bottom: 0;
    background: #1c8080;
    top: 158px;
    color: #fff;
    text-align: center;
    padding-top: 40px;
    font-size: 18px;
    border: 1px solid #000;
    
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

div:hover {
    top: 58px;
}

.bottom {
    position: absolute;
    bottom: 15px;
    width: 100%;
    font-size: 26px;
}

<div>
    <p>Height's transition</p>
    <p>Works fine in Chrome, FF</p>
    <p class="bottom">But not in IE</p>
</div>