带有 flex 的 CSS 空 div 以扩展并保持纵横比

.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>