Stretch Column height

by Ben Clayton

HTML

<table>
  <tr class="row">
    <td class="cols">
      <div class="multicol_column one">
        <div class="htmltext">
          ONE
        </div>
        <div class="groupwrapper">
          <table class="grow"><tr><td>XX</td></tr></table>
          
          
        </div>
      </div>
    </td>
    <td class="cols">
      <div class="multicol_column two">
        <div class="htmltext">
          TWO <br>TWO <br>TWO <br>TWO <br>TWO <br>TWO <br>
        </div>
        <div class="groupwrapper">
          <table class="flexgrow"><tr><td>XX</td></tr></table>
          
          
        </div>
      </div>
    </td>
    <td class="cols">
      <div class="multicol_column three">
        <div class="htmltext">
          THREE
        </div>


        <table>
          <tr class="row">
            <td class="cols">
              <div class="multicol_column one">
                <div class="htmltext">
                  ONE
                </div>
                <div class="empty-col">empty col</div>
              </div>
            </td>
            <td class="cols">
              <div class="multicol_column two">
                <div class="htmltext">
                  TWO <br>TWO <br>TWO <br>TWO <br>TWO <br>TWO <br>
                </div>
                <div class="empty-col">empty col</div>
              </div>
            </td>
            <td class="cols">
              <div class="multicol_column three">
                <div class="htmltext">
                  THREE
                </div>
                <div class="empty-col">empty col</div>

              </div>

            </td>
          </tr>
        </table>


        <div class="empty-col">empty col</div>

      </div>

    </td>
  </tr>
</table>
<div class="empty-col">empty col</div>

CSS

body {
  background-color: #111;
   color: white;
}

table {
  width:100%;
}

tr.row {
  display:flex;
}

td.cols {
  width: 33%;
  vertical-align: top;
  display: inline-flex;
  background-color: #ddd;
}

.empty-col {
  background: purple;
}

.multicol_column {
  background-color: rgba(255,0,0,0.5);
  flex-basis: 100%;
  display:flex;
  flex-direction: column;
}

.multicol_column > .empty-col {
  flex: 1 1 auto;
}


.groupwrapper {
  height: 100%;
}
table.flexgrow td {
  background-color: purple;

}
table.flexgrow {
  height: 100%;
  flex-basis: 100%;
  flex-direction: column;
}

table.flexgrow > tbody > tr {
  flex: 1 1 auto;
  flex-basis: 100%;
  flex-direction: column;
}

table.flexgrow > tbody > tr > td {
  flex: 1 1 auto;
  width: 100%;
  vertical-align:top;
}


/* .multicol_column.two {
  height: 300px;
} */