How to maintain an aspect ratio of a div inside another div

Question

So I have a div and which contains two divs one on top of the other. I want the one on top to have an aspect ratio of 4:5 with 100% width as it will contain an image of that ratio and then remaining height goes goes to the second div.

This is as far I could go

You can find all the code here

note: I wish to maintain that aspect ratio as the user shrink the screen size, try to shrink the width on the sandbox example to see

&_product{
                    overflow: hidden;
                    padding-top: 800.34px / 591.44px * 100%;
                    background: rgb(207, 206, 206);
                    position: relative;
                    max-width: 232px;
                    // max-height: 317.313px;
                    &_inside {
                      display: grid;
                      // grid-template-columns: 1fr 
                      // grid-template-rows: 1fr 80px;;
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                    }

                    border: 1px solid rgb(131, 72, 72);
                    position:relative;
                    width:100%;
                    height:fit-content;
                    box-shadow: 0 5px 15px rgba(0,0,0,.25);
                    overflow:hidden;
                    &_imgbox{
                      height: 100% ;
                      border: 1px solid red;
                      box-sizing:border-box;
                      position: relative;
                      // img{
                      //   width:100%;
                      //   display:block;
                      //   margin:0;
                      // }
                      &_aspect {
                        position: absolute;
                        width: 100%;
                        height: 5px/4px*100%;   // My attempted calculation
                        background: blue;
                        top: 0;
                        // left: 0;


                      }
                  }
                }

html

    <div class="Recommendations_container_recomendation_box_product">
                            <div class="Recommendations_container_recomendation_box_product_inside">
                                <div class="Recommendations_container_recomendation_box_product_imgbox">
                                    <div class="Recommendations_container_recomendation_box_product_imgbox_aspect">

                                        {/* <img src="https://images.sportsdirect.com/images/products/62310640_l.jpg" /> */}
                                    </div>

                                </div>
                                <div class="Recommendations_container_recomendation_box_details">
                                    <div class="Recommendations_container_recomendation_box_details_price">$55.99</div>
                                    <h2>Brand Name<br /><span>Mens Designer T-shirt</span></h2>


                                </div>
                            </div>

                        </div>

Answer 1

Try this:

.Recommendations_container_recomendation{

  display:flex;

}

Answer 2

I had this fixed by calculating the ratio on padding top instead of the height

fixed here

padding-top: height: 5px/4px * 100%;

Answer 3

Flex can really help you here. I attached a simplified version of what you are trying to achieve.

It's just few lines of CSS. Hope it helps.

If you change the height of the box you'll see it maintains the ratio. The ides is that inside the box, each item got a flex value. So the sum of all the value is then divided by the individual flex value to determine the ratio.

.box {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 300px;
  border: 1px solid black;
}

.four-fifth {
  flex: 4;
  background-color: red;
}

.remaining-height {
  flex: 1;
  background-color: green;
}

<div class="box">
    <div class="four-fifth">
        Content
    </div>
    <div class="remaining-height">
        Additional content
    </div>
</div>