Height in % = 0, if position is static or relative - css

Question

I'm facing an issue whenever I set the height of .task in % then it's height becomes 0. But at the same time if I will change position to absolute or fixed... it's working fine... why?
* {
font-family: monospace;
padding: 0;
margin: 0;
}
section{
margin-top: 8vh;
min-height: 87vh;
width:100%;
position: relative;
background-color: white;
}
section>.app{
width: calc(100% - 22vh);
min-height: inherit;
background-color: inherit;
left: 11vh;
position: relative;
padding-top: 5vh;
box-sizing: border-box;
}
section>.app>input[type="search"]{
width: 100%;
font-size: 200%;
outline: none;
position: relative;
height: 7vh;
border: none;
border-bottom: 0.5vh solid white;
color: deepskyblue;
background-color: deepskyblue;
box-sizing: border-box;
padding-right: 0.25em;
padding-left: 0.25em;
}
section>.app>input[type="search"]:valid{
background-color: white;
color: deepskyblue;
border-bottom-color: deepskyblue;
}
section>.app>input[type="search"]::-webkit-input-placeholder{
color: white;
}
section>.app>input[type="search"]::-moz-placeholder{
color: white;
}
section>.app>input[type="search"]:-ms-input-placeholde {
color: white;
}
section>.app>input[type="search"]::placeholde {
color: white;
}
section>.app>input[type="search"]:focus{
border-bottom-color: deepskyblue;
background-color: inherit;
}
section>.app>input[type="search"]:focus::-webkit-input-placeholder{
color: transparent;
}
section>.app>input[type="search"]:focus::-moz-placeholder{
color: transparent;
}
section>.app > input[type="search"]:focus:-ms-input-placeholder {
color: transparent;
}
section>.app>input[type="search"]:focus::placeholder{
color: transparent;
}
section>.app>div.tasks{
background-color: black;
position: relative;
margin-top: 5vh;
width: 100%;
min-height: 70vh;
}
section>.app>div.tasks>.task {
height: 10%;
width: 50%;
position: relative;
background-color: white;
}
<section>
<div class="app">
<input type="search" placeholder="Search For Task List..." spellcheck="false" required="required"/>
<div class="tasks">
<div class="task"></div>
</div>
</div>
</section>
I can't set the position: absolute; as parent element's height will no longer be relative to it's child.
You can also check out the full project here at codepen:
Project at codepen
As the styling causing this problem, if removed will cause a problem in my project.... if so plz suggest an alternative.

Answer 1

If I understand correctly, you are asking why it is that the height = 0 when you explicitly initiated that property as height: 10%; for the .task class. This is because the position: relative; property doesn't take elements out of the flow of things. When you use position: absolute; for example, it does take that element out of the flow of things and it would then make it have a different height.