Empty div with flex to expand and keep aspect ratio

I'm trying to create an empty div that expands to it's available space using flex: 1 or flex-grow: 1 but keep an aspect ratio using aspect-ratio: 16/9

I've tried lots of examples including the original padding-top: 56.25% hacks. But can't get anything to work correctly.

Here's what I have so far:

.parent {
  display: flex;
  column-gap: 30px;
  row-gap: 30px;
}

.container {
  display: flex;
  background:pink;
  flex-direction: column;
  height: 300px;
  width: 500px;
  align-items: center;
  justify-content: space-between;
}

#container-2 {
  height: 500px;
  width: 300px;
  background: green;
}

.item {
  position: relative;
  flex: 1;
  background: black;
  aspect-ratio: 16/9;
  opacity: 0.5;
  /* max-width: 100%; */ /* doesn't fix with ratio */
}

<div class="parent">
  <div class="container">
    <p>Example 1</p>
    <div class="item"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia incidunt dolorem quam! Tenetur facere, facilis modi ipsa sapiente repellendus dolores doloremque quae. Laborum sapiente voluptatum unde fugit tenetur laudantium animi.</p>
  </div>

  <div class="container" id="container-2">
    <p>Example 2</p>
    <div class="item"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia incidunt dolorem quam! Tenetur facere, facilis modi ipsa sapiente repellendus dolores doloremque quae. Laborum sapiente voluptatum unde fugit tenetur laudantium animi.</p>
  </div>
</div>

You'll see that the Example 1 works but Example 2 the .item overflows the width to try and get the aspect ratio with the height. I've tried max-width: 100% which stops the overflow but then the item is not 16:9.

Desired output:

Solution

For what it's worth, I also could not figure this out, but did eventually find this post, which I mostly stole to make the snippet below.

.parent {
  display: flex;
  column-gap: 30px;
  row-gap: 30px;
}

.container {
  display: flex;
  background:pink;
  flex-direction: column;
  height: 300px;
  width: 500px;
  align-items: center;
  justify-content: center;
  
}

.flexWrapper{
 flex: 1;
 width: 100%;
 position: relative;
}

#container-2 {
  height: 500px;
  width: 300px;
  background: green;
}

.item {
  background-color: black;
  opacity: .5;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
}

<div class="parent">
  <div class="container">
    <p>Example 1</p>
    <div class="flexWrapper">
      <div class="item"></div>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia incidunt dolorem quam! Tenetur facere, facilis modi ipsa sapiente repellendus dolores doloremque quae. Laborum sapiente voluptatum unde fugit tenetur laudantium animi.</p>
  </div>

  <div class="container" id="container-2">
    <p>Example 2</p>
    <div class="flexWrapper">
      <div class="item"></div>
    </div>
    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia incidunt dolorem quam! Tenetur facere, facilis modi ipsa sapiente repellendus dolores doloremque quae. Laborum sapiente voluptatum unde fugit tenetur laudantium animi.</p>
  </div>

</div>