Vertical div container does not render with calc() - Opera/Safari - html

Question

I have two ratio div containers and a splitter bar div among. Unfortunately the bottom container is not rendered by Opera or Safari. How to conjure up the bottom one by keeping the calc() concept?
function GetHeight() {
var element = document.getElementById("bottomContent");
if (element) {
if (element.getBoundingClientRect) {
var rect = element.getBoundingClientRect();
var absHeight = getAbsoluteHeight(element);
alert(" rectHeight: " + rect.height + "\n offset height: " + element.offsetHeight + "\n client height: " + element.clientHeight + "\n abs height: " + absHeight);
} else {
alert("Browser does not support!");
}
} else {
alert("No element!");
}
}
function getAbsoluteHeight(el) {
el = (typeof el === 'string') ? document.querySelector(el) : el;
var styles = window.getComputedStyle(el);
var margin = parseFloat(styles['marginTop']) +
parseFloat(styles['marginBottom']);
return Math.ceil(el.offsetHeight + margin);
}
html,
body {
height: 95%;
}
.content {
background: rgba(221, 221, 221, 0.41);
min-width: 5px;
width: 100%;
height: 100%;
}
.splitCntainerVertical {
width: 100%;
height: 100%;
min-width: 5px;
margin: auto;
overflow: hidden;
}
.splitCntainerTopContent {
width: 100%;
min-height: 5px;
margin: auto;
overflow: hidden;
}
.splitCntainerBottomContent {
width: 100%;
min-height: 5px;
margin: auto;
overflow: hidden;
}
.splitterVertical {
border-radius: 2px;
background: rgba(31, 37, 37, 0.41);
margin-top: 10px;
margin-bottom: 10px;
height: 5px;
width: 100%;
cursor: n-resize;
}
<button onclick="GetHeight()">Get bottom container height</button>
<div class="splitCntainerVertical">
<div class="splitCntainerTopContent" style="height:65%;">
<div class="content"></div>
</div>
<div id="splitter" class="splitterVertical"></div>
<div id="bottomContent" class="splitCntainerBottomContent" style="height: calc(35% - 25px);">
<div class="content"></div>
</div>
</div>
Any idea?