I am designing a simple bootstrap website. In the left pane view, I have two flex, how can I make the height of the two flex constant, because as the size of the image changes the second flex content moves up. Also is it possible that the first flex occupy constant height irrespective of the image size?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
<body>
<nav class="navbar navbar-expand-xl bg-light">
<img class="mw-100" src="header_image.jpg" alt="Logo">
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 bg-primary text-white" >
<!-- <h3>Column 3</h3> -->
<div class="d-flex flex-lg-column mb-3">
<div class="p-2 bg-info">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="11.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>11</h5>
<p>nature 11</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="12.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>12</h5>
<p>nature 12</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="13.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>13</h5>
<p>nature 13</p>
</div>
</div>
</div>
</div>
</div>
<div class="p-2 bg-warning">
<p><iframe scrolling="no" frameborder="no" clocktype="html5" style="overflow:hidden;border:0;margin:0;padding:0;width:100%;height:210px;"src="https://www.clocklink.com/html5embed.php?clock=048&timezone=Nepal_Kathmandu&color=purple&size=450&Title=&Message=&Target=&From=2021,1,1,0,0,0&Color=purple"></iframe></p>
</div>
</div> <!-- d-flex flex-lg-column mb-3 closed -->
</div> <!-- col-lg-4 closed -->
<div class="col-lg-8">
<div class="d-flex flex-lg-column mb-3">
</div> <!-- d-flex flex-lg-column mb-3 closed -->
</div>
<!-- col-lg-8 closed -->
</div>
<!-- row closed -->
</div>
<!-- container-fluid closed -->
<div class="footer">
<p> © 2021 Copyright: </p>
</div>
</body>
</html>