Vertical line div disappears if containing element is auto sized - html

Question

I'm using bootstrap, with the following html:
<div class="container-fluid h-100">
<div class="row align-items-center h-100">
<div class="col-md" align="center">
<h2>Login</h2>
<form>
<table>
<tbody>
</tbody>
</table>
<button type="submit">Login</button>
</form>
</div>
<div class="col-md-auto h-100 d-none d-md-flex">
<div class="vertical_divider"></div>
</div>
<div class="col-md" align="center">
<div class="signup_button"><p>Signup</p></div>
</div>
</div>
</div>
With the following relevant css:
.page_content {
border: 3px solid orange;
border-radius: 20px;
padding: 30px;
height: 75vh; #Changing this to 'auto' makes the vertical divider disappear
max-height: 75vh;
overflow-y: scroll;
}
.vertical_divider {
position: relative;
height: 100%;
width: 0;
border: none;
border-right: 3px solid $bordercolour;
}
Fiddle: https://jsfiddle.net/aq9Laaew/176561/
This makes a div that is always 75% of the viewport height, regardless of its content. This works perfectly.
I want to modify it so that the div is only as big as its contents, up to a maximum of 75vh. If the content is bigger than that, the overflow should scroll within the div. I've done this by changing the height attribute of the page_content class to auto. This works, except that it makes the central orange line disappear (this happens in the fiddle too, if you change the setting).
Why does this happen? h-100 should make the column containing the vertical divider 100% of the row, and yet it doesn't. I've tried making various styles !important, but that didn't make any difference.

Answer 1

Why does this happen?
Because a percentage height only works when the parent element has a set height, with the exception of the html tag. When you set .page_content height to auto, there is no longer a set height on the parent element of the divider, and thus a percentage height does nothing.
To make it work you either need to ensure that the parent element chain all the way until html has a set height (i.e. not auto). Or as an alternative solution, if your middle column has no other purpose than the divider line, the whole column is kind of pointless since you can just create the line as a CSS border of one of the two other columns.