纯CSS实现右边元素高度始终保持与左边相等

网上很多方法是使用 margin-bottom:-3000px; padding-bottom:3000px;的方式实现，可是我用着有问题，后来发现下面这种很简单的方法

由于父元素的高度为auto,因此子元素直接使用height:100%时是无法起作用的，但是对右边元素使用绝对定位时即可实现

<style>
    .wrap{
        width: 100%;
        height: auto;
        background-color: aquamarine;
        display: flex;
        position: relative;
    }
    .left{
        width: 50%;
        height: 50px;
        background-color: aqua; 
    }
    .right{
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background-color: bisque;
    }
</style>


<div class="wrap">
   <div class="left"></div>
   <div class="right"></div>
</div>

 

效果如下：