Flexbox 3-Cols 100% height

Question

I know there are similar questions but I just don't get onto it.

My website has 3 columns next to each other using Flexbox (row).

All I want is that each column fills up the screen height to 100%. Of course the layout should still be responsive for mobile phones.

<div class="flex-container">
    <div class="flex-col col1">Stuff</div>
    <div class="flex-col col2">Stuff</div>
    <div class="flex-col col3">Stuff</div>
</div>

CSS:

.flex-container {
     position: relative;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-evenly;
     overflow: hidden;
     align-items: stretch;
}
        
.col {
    text-align: center;
    width: 400px;
    font-size: small;
    padding:20px;
}

.col1 {
    background-color: grey;
}

.col2 {
    background-color: red;
    flex-grow: 2;
}

.col3 {
    background-color: green;
    flex-grow: 1;
}

Answer 1

you could use height: 100vh; for each flex-col class.

.flex-container{
            position: relative;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            overflow: hidden;
            align-items: stretch;
        }

        .col{

            text-align: center;
            width: 400px;
            font-size: small;
            padding:20px;
        }

    .col1{
    background-color: grey;
}


.col2{
    background-color: red;
    flex-grow: 2;
}

.col3{
    background-color: green;
    flex-grow: 1;
}


.flex-col {
  height: 100vh;
}

<div class="flex-container">
<div class="flex-col col1">Stuff</div>
<div class="flex-col col2">Stuff</div>
<div class="flex-col col3">Stuff</div>
</div>