CSS Relative children take height of parent - html

Question

I have a parent div with padding, inside there are 2 children. I want for second child b to take the rest of the height of parent (minus div a). And if div a is not present, than take all height. (with same css!)
#parent {
position: relative;
left: 0;
max-width: 500px;
max-height: 200px;
background: #333;
top: 0;
overflow: hidden;
}
#parent:after {
padding-top: 56.25%;
display: block;
content: '';
}
.a {
position: relative;
height: 20px;
width: 100%;
background: red;
}
.b {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: blue;
overflow: hidden;
}
<div id="parent">
<div class="a">1 </div>
<div class="b">2 </div>
</div>
edit:
why was the question downvoted? What is wrong with the question? how do I ask it without being downvoted?

Answer 1

You can use view-height css unit for div b. Example with your code. If you remove div a you will notice that div b will take all the height.
#parent {
position: relative;
left: 0;
max-width: 500px;
max-height: 200px;
background: #333;
top: 0;
overflow: hidden;
}
#parent:after {
padding-top: 56.25%;
display: block;
content: '';
}
.a {
position: relative;
height: 20px;
width: 100%;
background: red;
}
.b {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: blue;
overflow: hidden;
}
<div id="parent">
<div class="a">1 </div>
<div class="b">2 </div>
</div>

Answer 2

The intended behaviour can be achieved with flex-box layouts, as demonstrated in the Code Snippet embedded below.
Solution Breakdown:
#parent - declare flex on containing parent element, as well as
flex-wrap so that nested elements can occupy the full-width of the
container, we want to maintain the row direction here.
.a - declare flex-basis on this nested element; which is
tantamount to declaring width: 100% - we want it to remain
full-width so that the following sibling element (.b) wraps to a
new row.
.b - declare the shorthand property flex: 1 1 to specify that
this element should occupy the full width and height of its
containing element but not exceed it. The flex1 property is a
shorthand for flex-shrink2,
flex-grow3, and flex-basis4
#parent {
position: relative;
left: 0;
max-width: 500px;
max-height: 200px;
background: #333;
top: 0;
overflow: hidden;
/* additional */
display: flex;
flex-wrap: wrap;
}
#parent:after {
padding-top: 56.25%;
display: block;
content: '';
}
.a {
position: relative;
height: 20px;
background: red;
/* additional */
flex-basis: 100%;
}
.b {
position: relative;
background: blue;
/* additional */
flex: 1 1;
}
<div id="parent">
<div class="a">1</div>
<div class="b">2</div>
</div>
<br>
<div id="parent">
<div class="b">2</div>
</div>
A note on flex-box:
Since flex-box has limited to no support for legacy browsers (like I.E) for full browser support and compatibility refer to either one of the aforementioned alternatives.
See browser compatibility:
caniuse.com
flex - CSS | MDN
Edit
Updated
#parent {
position: relative;
left: 0;
max-width: 500px;
max-height: 200px;
background: #333;
top: 0;
overflow: hidden;
/* additional */
display: flex;
flex-direction: column;
height: 200px; /* an absolute height value is required for relative flex-box heights */
}
/*#parent:after { kill the interloper
padding-top: 56.25%;
display: block;
content: '';
}*/
.a {
position: relative;
height: 20px;
background: red;
}
.b {
position: relative;
background: blue;
/* additional */
flex: 1 1;
}
<div id="parent">
<div class="a">1</div>
<div class="b">2</div>
</div>
<br>
<div id="parent">
<div class="b">2</div>
</div>
The updated snippet demonstrates an alternative solution with a column direction. The pseudo-element #parent:after has been removed as it negates any attempt to achieve the behaviour specified in your question (if this pseudo-element is required in any shape or form, consider updating your question to point this out with clear explanations as to its function and or role).