html - 调整 flex 元素的大小以适合父项

Question

我正在尝试使用 flex parent height: 100vh 创建一个两列布局.第一列是一个带有一些标题和一个段落的 div，第二列是一个带有图像的 div。我希望所有视口(viewport)上的 flex 父高度为 100vh，并且图像缩小以适合容器。
但是，图像会溢出容器并且不会缩小。这就是我想要实现的目标:


这是我的代码:

.section {
  width: 100vw;
  height: 100vh
  background-color: blue;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}

.wrapper {
  width: 100%;
  max-height: 100%
}

img {
  width: 100%
  height: 100%;
  object-fit: contain;
}

<section class="section">
    <div class="container">
      <div class="wrapper">
        <h1>Some heading</h1>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
      <div class="wrapper">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1280px-Image_created_with_a_mobile_phone.png"></img>
      <div>
    </div>
<section>

Answer 1

您必须添加样式来组织布局

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<section class="fdb-block">
  <div class="container-fluid">

    <div class="row text-left align-items-center pt-5 pb-md-5">
      <div class="col-md-5 m-md-auto order-md-5">
        <img alt="image" class="img-fluid" src="/image/6uUBx.png">
      </div>

      <div class="col-md-5">
        <h2><strong>Feature Two</strong></h2>
        <p class="lead">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
        <p><a href="https://www.froala.com">Learn More <i class="fas fa-angle-right"></i></a></p>
      </div>
    </div>

  </div>
</section>

标题