Is there a more flexible solution than setting the parent element to relative and the child to absolute?
Kindly refrain from marking this question as a duplicate of Make flexbox children 100% height of their parent
I tried the method suggested by @David Storey in that thread, but it only seems to work in a flex-direction: row layout and not in my fiddle's flex-direction: column layout.
HTML:
<div class="d-flex flex-column h-100">
<div class="p-2 d1">Flex item 1</div>
<div class="p-2 d6 flex-grow-1 d-flex position-relative">
<div class="inner h-100 flex-grow-1">
background-color: green;
</div>
</div>
</div>
CSS:
html,body{
height: 100%;
}
.d1 {
background-color: yellow;
}
.d6 {
background-color: green;
}
.inner {
background-color: red;
}