I'm struggling to shrink the flex items in my layout despite using the flex-shrink property. I've experimented with adjusting the vh and vw values of the .row (flex parent), playing around with margins and padding, but still, the items won't shrink. Any guidance on how to correct this issue would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex properties</title>
<link rel="stylesheet" href="dist/css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col container--box">
<h1 class="container--box__text">1</h1>
</div>
<div class="col container--box">
<h1 class="container--box__text">2</h1>
</div>
<div class="col container--box">
<h1 class="container--box__text">3</h1>
</div>
<div class="col container--box">
<h1 class="container--box__text">4</h1>
</div>
<div class="col container--box">
<h1 class="container--box__text">5</h1>
</div>
</div>
</div>
</body>
</html>
body {
background-color: #a09b9b;
}
body .container {
border: 2px solid green;
width: 70vw;
}
body .container .row {
display: flex;
flex-flow: row nowrap;
height: 25vh;
}
body .container .row .col:nth-child(1) {
flex-shrink: 1;
}
body .container .row .col:nth-child(2) {
flex-shrink: 1;
}
body .container .row .col:nth-child(3) {
flex-shrink: 3;
}
body .container .row .col:nth-child(4) {
flex-shrink: 1;
}
body .container .row .col:nth-child(5) {
flex-shrink: 1;
}
body .container .row .col {
background-color: red;
border: 1px solid black;
margin: 0;
padding: 50px;
height: 20%;
}
body .container .row .col .container--box__text {
font-size: 30px;
}