Как выровнять последний дочерний элемент ячейки таблицы по нижней части ячейки? ⇐ CSS

[Anonymous]

I have a table with two divs inside a cell. I want the first div aligned to the top of the cell, and the last div aligned to the bottom. This is an example of what the table might look like:

This content should be at top of the cell, but not overlap This content should be at bottom of the cell, but not overlap Long Content

This content should be at top of the cell, but not overlap This content should be at bottom of the cell, but not overlap Shorter Content My first attempt was to use relative positioning on the table cell, and absolute positioning on the bottom div. This works when the table cell is tall enough to fit all the content, but the absolute positioning causes the two divs to overlap for smaller cells.

CodePen: https://codepen.io/Adam-Petersen/pen/mdgJwaG

Next I tried to use Flexbox, but it appears there is some non-trivial rendering logic when using Flexbox inside of a table cell. This is the best attempt I have come up with so far:

CodePen: https://codepen.io/Adam-Petersen/pen/NWmqgeZ

This works perfectly in Chrome, but doesn't work in Firefox. I don't understand why the height: 0px is required on the td for it to actually justify the content how I want in Chrome, but without working in Firefox I will have to come up with something else.

Is there some way to make this CSS compatible with Firefox, or is there another approach entirely that I'm not considering?


Источник: https://stackoverflow.com/questions/781 ... f-the-cell