Untitled

<body>
<div class="vwrapper">
  <div id="row1">
    this is the header
  </div>
  <div id="row2">
    this is the second line
  </div>
  <div id="row3">
    <div id="col1">
      col1
    </div>
    <div id="col2">
      col2
    </div>
    <div id="col3">
      col3
    </div>
  </div>
</div>
</body>

.vwrapper {
  display: flex;
  flex-direction: column;

  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;

  //height: 1000px;

  #row1 {
    background-color: red;

  }

  #row2 {
    background-color: blue;

  }

  #row3 {
    background-color: green;
    flex 1 1 auto;

    display: flex;

    #col1 {
      background-color: yellow;
      flex 0 0 240px;
    }

    #col2 {
      background-color: orange;
      flex 1 1;
    }

    #col3 {
      background-color: purple;
      flex 0 0 240px;
    }
  }
}

.wrapper, html, body {
        height:100%;
        margin:0;
    }
    .wrapper {
        display: flex;
        flex-direction: column;
    }
    #row1 {
        background-color: red;
    }
    #row2 {
        background-color: blue;
    }
    #row3 {
        background-color: green;
        flex:2;
        display: flex;
flex-wrap:nowrap;/* it can have a reason to be here, useless for column */
    }
    #col1 {
        background-color: yellow;
        flex :0 0 240px;
    }
    #col2 {
        background-color: orange;
        flex: 1 1;
    }
    #col3 {
        background-color: purple;
        flex: 0 0 240px;
    }

.vwrapper {
  display: flex;
  flex-direction: column;

  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;

  height: 100%;
}

#row3 {
   background-color: green;
   flex: 1 1 auto;
   display: flex;
}