I'm currently developing an interactive web interface, and I'm facing a challenge with a row in bootstrap that consists of two columns. One column contains an "embed-responsive-16by9" element, while the other column has a ul whose height is unknown. My goal is to make the ul column match the height of the embed column, overflowing if it's larger but not shrinking if it's smaller.
I've experimented with ".row-eq-height", setting max-height, and other methods, but nothing seems to have solved the issue.
<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>
For your information, I am using React for this project, so the code is split into multiple components. However, I have combined everything here for clarification purposes.
SOLUTION: I found that using h-100 and flex-grow-1 did the trick. Although I had tried both before, applying them directly to the ul element was the missing piece.
<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">