prevent parent growing from children

Question

I have two aligned dive one on the left and one on the right, I would like to my right one don't grow from it children to make it scrollable.

.wrap {
  display: flex;
}

.left {
    background-color: blue;
}

.right {
    background-color: yellow;
    overflow: auto;
}

<div class="wrap">
<div class="left"><p>Bacon ipsum dolor sit amet shoulder tenderloin pork chop, tongue prosciutto turducken turkey corned beef tail filet mignon. T-bone ground round brisket, flank turducken biltong chuck jowl rump.</p></div>

<div class="right"><p>Bacon ipsum dolor sit amet shoulder tenderloin pork chop, tongue prosciutto turducken turkey corned beef tail filet mignon. T-bone ground round brisket, flank turducken biltong chuck jowl rump.</p>
    <ul>
        <li>Bacon</li>
        <li>Ham</li>
        <li>Pork Shoulder</li>
        <li>Boston Butt</li>
    </ul>
</div>
</div>

According this code, I would like that my yellow div have the same height as my blue one (and not the inverse) to make it content scrollable.

How to handle that ?