Is there a way to dynamically scale the height of the black containers from a maximum height of 550px to, for example, a height of 400px simply by adjusting the browser's width? Additionally, I would like the box divs to resize proportionally along with the black container. Instead of using media queries, I want this resizing to happen gradually so that you can see it change pixel by pixel. I prefer not to have the height transition abruptly when reaching a specific width set in media queries.
.container-black {
height: 550px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
border-bottom: solid 8px grey;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
height: 70%;
width: 30%;
background-color: red;
}<body>
<div class="container-black">
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
</div>
</body>