Flex-items not shrinking with flex-shrink

I would like to shrink any of these flex items and I can't seem to manage it even with flex-shrink.

I've tried changing the vh and vw of .row (flex parent). I have increased and reduced margins and padding for the flex-items and their content and still, no shrink. I'd love any corrections.

<!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;
}

Solution

To make the flex-shrink property workabl.

Remove fixed padding from .container--box:

body .container .row .col .container--box {
  padding: 0;
}

Here is your updated css code

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 {
  flex: 1;
  flex-basis: 0;
  background-color: red;
  border: 1px solid black;
  margin: 0;
  height: 20%;
}

body .container .row .col .container--box {
  padding: 0;
}

body .container .row .col .container--box__text {
  font-size: 30px;
}