How to make column heights equal in Boostrap4 with embed? - css

Question

I'm working to create an interactive web interface, and I have a row in bootstrap with two columns. One column contains an "embed-responsive-16by9" and the other has a ul that I don't know the height of. How would I be able to make the column with the ul stay the height of the embed, overflowing if it is larger but not going less if it is smaller?
I've tried ".row-eq-height", setting max-height, etc. but nothing seems to be working.
<div className="container-fluid">
<div className="row h-40 row-eq-height">
<div className="col">
<div className="rounded resize shadow-sm">
<div className="embed-responsive embed-responsive-16by9">
<iframe
className="embed-responsive-item"
src="https://www.youtube.com/embed/RHXsHZMBIcQ"
title="Video Player"
/>
</div>
<div className="pl-2 pt-2">
<input className="mr-1" type="checkbox" />
<label>Autoplay?</label>
</div>
</div>
</div>
<div className="col">
<ul className="list-group container float-left rounded p-0 mr-auto eq-col min-vw-30 max-vw-80 resize shadow-sm">
<nav className="navbar navbar-light navbar-right bg-light m-2 p-1">
<h1 className="navbar-brand">Watched Teams</h1>
<div className="form-inline my-2 my-lg-0">
<input
className="form-control mr-sm-2"
type="search"
placeholder="Search"
/>
<button
className="btn btn-outline-success my-2 my-sm-0"
type="submit"
>
Search
</button>
</div>
</nav>
{this.state.teams.map(team => (
<Team key={team.teamNum} team={team} />
))}
</ul>
</div>
</div>
</div>
BTW I am doing this all through react, so this is somewhat separated as it's in multiple components, but this is all put together for the sake of the post.
SOLUTION: The key was using h-100 and flex-grow-1...I had tried both before, but I guess not on the ul element directly.
<ul className="h-100 list-group container float-left rounded p-0 mr-auto eq-col min-vw-30 max-vw-80 shadow-sm flex-grow-1">

Answer 1

The key was using h-100 and flex-grow-1...I had tried both before, but I guess not on the ul element directly.
<ul className="h-100 list-group container float-left rounded p-0 mr-auto eq-col min-vw-30 max-vw-80 shadow-sm flex-grow-1">