Is there a way to make the element shrink when the flex container below grows due to flex-wrapping? Currently, the new space is created below the container instead of shrinking the one above. The flex-grow and flex-shrink properties do not seem to work as expected when wrapping occurs. The goal is to ensure that everything fits within the viewport without requiring the user to scroll.
https://i.sstatic.net/SMO3h.jpg
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.main-container {
display: flex;
width: 100vw;
height: 100vh;
flex-direction: column;
}
.main-container>* {
text-align: center;
}
.shrink {
background-color: #c0caad;
padding-top: 30%;
height: 80vh;
width: 100vw;
flex-shrink: 0;
}
.grow {
height: 20vh;
width: 30vw;
background-color: #9da9a0;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
}
.grow>* {
border: 5px solid #654c4f;
height: 100%;
background-color: #b26e63;
width: 50%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<div class="shrink">Shrink</div>
<div class="grow">
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
</div>
</div>
</body>
</html>