I'm attempting to design a two-column layout using a flex parent with a height of 100vh. The first column consists of a div containing a heading and a paragraph, while the second column contains a div with an image. I want the flex parent's height to always be 100vh on any screen size, with the image shrinking to fit within the container.
Despite my efforts, the image is overflowing the container and not shrinking as desired. Here is the desired outcome I'm aiming for: https://i.sstatic.net/D4KNw.png https://i.sstatic.net/4udvR.png
Below is the code snippet:
.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>