4

I have a table with multiple cells, don't have any information about the height of the cells but I want the height of the content of one of the cells (which is a flexbox container) to take 100% of the cell's height:

<table border="1">
  <tr>
    <td>
      <div style="height: 152px">some content</div>
    </td>
    <td style="vertical-align: top">
      <div style="display: flex; flex-wrap: wrap;">
        <div style="height: 100%; min-height: 100%; flex: 1; background: red">
          This should take 100% height
        </div>
      </div>
    </td>
  </tr>
</table>
  1. Looking for a flexbox solution, please don't change it to grid-based.
  2. I don't want to set the background color in the <td>, there is a reason for setting the red-background on the <div> for the example.
OSdave
  • 8,538
  • 7
  • 45
  • 60
Dekel
  • 60,707
  • 10
  • 101
  • 129
  • 2
    height:0 on the td then height:100% of the first div – Temani Afif May 08 '20 at 23:00
  • @TemaniAfif awesome! Would you like to add this as an answer so I can accept it? btw, is this a hack or intended behaviour? Does it work the same way in all browsers? Thanks! – Dekel May 08 '20 at 23:05
  • it's half a hack and intended result because height:0 will make sure the percentage height will work but won't give the cell a height equal to 0 because it's inside table ... I searching the duplicate that explain this. – Temani Afif May 08 '20 at 23:06
  • I searched a lot for duplicate on this and couldn't find any :( – Dekel May 08 '20 at 23:07
  • I know one but forgot the key words to find it ... will get it – Temani Afif May 08 '20 at 23:08
  • If you need to know which keywords to use in order to find it - it means the question (or answer) are not good/generic enough :-D I tried SO/google with multiple different phrases and got nothing :( – Dekel May 08 '20 at 23:09
  • I know a lot like this one for example: https://stackoverflow.com/a/28486954/8620333 but there is a specific one I am looking for – Temani Afif May 08 '20 at 23:13
  • ok found it, the two intresting variant from the duplicate are : https://stackoverflow.com/a/46110096/8620333 and https://stackoverflow.com/a/32112698/8620333. you also have the position:absolute trick that also work fine – Temani Afif May 08 '20 at 23:19
  • 2
    @TemaniAfif thanks for taking the time to find the right question :-) – Dekel May 08 '20 at 23:20

1 Answers1

6

You may set the td height to 0 and then the outer div's height to 100%. Check the following code:

<table border="1">
  <tr>
    <td style="height: 0">
      <div style="height: 100%">some content</div>
    </td><td style="vertical-align: top">
      <div style="display: flex; flex-wrap: wrap;">
        <div style="height: 100%; min-height: 100%; flex: 1; background: red">
          This should take 100% height
        </div>
      </div>
    </td>
  </tr>
</table>
Pedro Coelho
  • 1,411
  • 3
  • 18
  • 31
  • 2
    Thanks for this answer, but @TemaniAfif provided the exact same as a comment 6 minutes before you answered and I already suggested him to add his answer here. We are searching for a duplicate question... – Dekel May 08 '20 at 23:11
  • Oh, I should be testing my solution when he commented. Sorry. Fair enough. Please, mark his answer as acceptable one after he answers it. If you guys want, please mark my answer as useful too! Cheers. – Pedro Coelho May 08 '20 at 23:15