I'm trying to recreate a quite simple layout using Flexbox, however there's something I'm missing.
The whole content must fit inside the viewport (no scroll), so to accomplish this the image should shrink automatically (if needed). I've tried with flex-shrink: 1 but it doesn't seem to work as I intended.
.button {
cursor: pointer;
display: block;
text-align: center;
white-space: nowrap;
font-size: 17px;
padding: 8px 16px;
border-radius: 18px;
background: #3EAFFF;
color: white;
line-height: 35px;
height: 35px;
width: calc(100% - 32);
}
.flex {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
height: 100vh;
max-height: 100vh;
}
.image {
flex-shrink: 1;
max-height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div class="flex">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat, neque eu tempus laoreet, ligula nulla feugiat nisi, et molestie mauris quam a neque. Integer accumsan nisl semper libero bibendum, lacinia cursus neque suscipit. Sed eu imperdiet elit. Vivamus et ultricies sapien. Maecenas ac massa quis ipsum vulputate commodo vitae sed dolor. Aliquam eros diam, maximus sit amet ligula eget, auctor dapibus velit. Nulla at nibh ullamcorper, ullamcorper augue eu, sagittis sapien. Sed mattis augue sed rhoncus venenatis. In non vulputate mauris. Praesent vehicula porttitor dapibus. Ut tincidunt venenatis metus ac pulvinar.
</div>
<div class="image">
<img style="max-width: 100%; max-height: 100%; margin: auto; display: block;" src="https://upload.wikimedia.org/wikipedia/it/thumb/9/9c/IOS_14_screenshot.png/800px-IOS_14_screenshot.png">
</div>
<div>
<a class="button direct-download">BUTTON</a>
</div>
</div>
</body>
</html>