My attempt to set the height of a div element to 70% using CSS3's calc() function has been unsuccessful. While specifying viewport height (70vh) works, I specifically need the height to be 70%.
.scroll-inner-container {
height: -moz-calc(70vh + 0px);
height: -webkit-calc(70vh + 0px);
height: calc(70vh + 0px);
overflow-y: scroll;
}
.scroll-outer-container {
position: relative;
height: 100%;
background-color: #ededed;
padding: 0px 20px;
}<div class="pf_content tab-pane">
<div class="scroll-outer-container">
<div class="scroll-middle-container>
<div class="scroll-inner-container">
<div class="paragraph-space content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores consequatur, voluptas aspernatur ducimus sapiente rem quis cumque expedita quia nisi! Labore vel ut veritatis, magnam itaque quibusdam sed nemo, doloribus accusamus voluptatem quae. Delectus
minima excepturi, voluptatem consequatur voluptatum, in assumenda, harum aperiam fugit doloremque, cupiditate natus animi sed odit! Libero delectus maxime, corrupti quos nisi facilis labore porro consectetur in, quaerat at repellendus perspiciatis,
dicta placeat. Ullam doloribus reiciendis laborum, similique, inventore culpa. Asperiores tempora debitis voluptatum facere maiores iste fugiat quisquam necessitatibus. Esse impedit similique, iusto. Omnis voluptatibus quo animi a repellendus
vero modi? Odit tenetur, tempore laboriosam reprehenderit vitae dolorem inventore placeat illo iure dicta iste minima asperiores eos dignissimos, quis et officia sapiente, distinctio animi deserunt voluptatum. Unde quo dolores est id numquam
perspiciatis consequuntur beatae, optio quia ut explicabo officia nihil itaque quidem adipisci maiores, vitae accusamus. Commodi deserunt id, natus consequuntur tempore. Voluptates adipisci, perferendis ex quae cumque repellendus, cupiditate
a iste maiores, pariatur fugiat officia voluptatum. Fuga excepturi, at, ut doloribus ipsum quis itaque voluptate repellendus sint vel aut in alias. Repellat...