Is it possible to set a td with display flex to be full height, or have different CSS to achieve the same effect?

Question

I have inherited a project where someone decided to set the display for a td to flex. One of the consequences of this is that when there are other tds in the row that span multiple lines, the td with display: flex does not stretch to the height of the other tds.

The correct way to fix this (I think) would be to remove the display: flex from the td and have it on an inner div, but I currently only have permissions to modify the CSS, so I'm wondering if there is any way to fix it with CSS only (while preserving the layout within the td as shown in the made-up code snippet below)?

EDIT: The desired layout is to have a left and right side within the td, the right side being a span that is a colored dot. The colored dot needs to always be on the right and top aligned even on a mobile device when the td is very narrow and the left side ends up wrapping.

table td {
  border: 1px solid black;
}

td.flex {
  display: flex;
  justify-content: space-between;
}

span.right {
  display: inline-block;
  margin-left: 1em;
  width: 1em;
  border-radius: 50%
}

span.red {
  background-color: red;
}

span.green {
  background-color: green;
}


  
    
      Left  
      td with
multiple rows
blah blah blah
    
    
      Left side longer  
      td with
multiple rows
blah blah blah
    
    
      
        The right way to do it  
      
      td with
multiple rows
blah blah blah

user_2813224 · Answer

Set the widths so that the right takes up 2.3rem (width: 1.15rem; margin-left: 1.15rem) and the left takes up the rest of the width. Note the em are replaced by rem because they are not affected by casscading styles and inheritance:

span:first-of-type {
  width: calc(100% - 2.3rem);
}

In the example, all and are the same to demonstrate how the styles behave with different lengths of text in the left . Tested it in moblie dimensions and it is always centered vertically and the dots always at the far right never shifting. The shape is always round as well due to changing em to rem and adding height: 1.15rem;. This is much better than flexbox.

:root {
  font: 2ch/1 'Segoe UI';
}

table td {
  border: 1px solid black;
}

span {
  display: inline-block;
  border: 0;
  vertical-align: middle;
}

span:first-of-type {
  width: calc(100% - 2.3rem);
}

span.right {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 1.15rem;
  border-radius: 50%;
}

span.red {
  background-color: red;
}

span.green {
  background-color: green;
}


  
    
      Left  
      td with
multiple rows
blah blah blah
    
    
      Left side longer  
      td with
multiple rows
blah blah blah
    
    
      The right way to do it  
      
      td with
multiple rows
blah blah blah

user_5641669 · Answer

I don't know what the real code contains instead of the red/green dot, but if it's an image or something similar, you can simply use float: right on it and remove the display: flex from the td:

table td {
  border: 1px solid black;
}

td.flex {
  /* removed */
}

span.right {
  display: inline-block;
  margin-left: 1em;
  width: 1em;
  border-radius: 50%
}

span.red {
  background-color: red;
  float: right;
}

span.green {
  background-color: green;
}


  
    
      Left  
      td with
multiple rows
blah blah blah
    
    
      Left side longer  
      td with
multiple rows
blah blah blah
    
    
      
        The right way to do it  
      
      td with
multiple rows
blah blah blah

user_5625547 · Answer

so I'm wondering if there is any way to fix it with CSS only

Yes, use something like this to get the original/intended behaviour:

td {
  display: table-cell !important;
}

If I remove the display: flex I lose the right alignment of the colored dot

Add one more CSS rule to align that to the right, for example, using float: right

span.right {
  float: right;
}

table td {
  border: 1px solid black;
}
td.flex {
  display: flex;
  justify-content: space-between;
}

span.right {
  float: right;
  display: inline-block;
  margin-left: 1em;
  width: 1em;
  border-radius: 50%
}
span.red {
  background-color: red;
}
span.green {
  background-color: green;
}

td {
  display: table-cell !important;
}

Left   td with
multiple rows
blah blah blah
Left side longer   td with
multiple rows
blah blah blah
The right way to do it   td with
multiple rows
blah blah blah

Is it possible to set a td with display flex to be full height, or have different CSS to achieve the same effect?

3 Answers