Stretch container in table cell to full height-CodePudding

I have a table with columns of different heights. Now I want to stretch the containers in the columns (in deeppink) to the full height of their parents.

Problem: positioning items absolute or using only flexbox instead of the table is not a solution. Is there a CSS only solution to stretch the containers to the full height of their parents?

td {
  background-color: deepskyblue;
  width: 30px;
}

.container {
  display: flex;
  flex-direction: column;
  background-color: deeppink;
  text-align: center;
  // code below not working
  align-items: stretch;
  justify-content: space-between;
  height: 100%;
}

<table>
  <td>
    <div >
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
    </div>
  </td>
  <td>
    <div >
      <p>1</p>
    </div>
  </td>
  <td>
    <div >
      <p>1</p>
      <p>2</p>
    </div>
  </td>
</table>

Thank you for your help which is highly appreciated! <3

CodePudding user response：

You just need to give the table cell a height (it should expand anyway due to the way table cells work) but if it has a height, the the flex container can take 100% height

td {
  background-color: deepskyblue;
  width: 30px;
  height: 1px;
}

.container {
  display: flex;
  flex-direction: column;
  background-color: deeppink;
  text-align: center;
  justify-content: space-between;
  height: 100%;
}

<table>
  <td>
    <div >
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
    </div>
  </td>
  <td>
    <div >
      <p>1</p>
    </div>
  </td>
  <td>
    <div >
      <p>1</p>
      <p>2</p>
    </div>
  </td>
</table>