1698772 - table elements in flex container are stretched to the maximum height

Status: RESOLVED INVALID

(Core :: Layout: Flexbox, defect)

Description

[r3dz0r]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36

Steps to reproduce:

https://jsfiddle.net/g80wyu71/5/
version 87.0b9 (32) beta

Actual results:

tr and td has a big height

Expected results:

tr and td has not a big height

Comment 1

[r3dz0r]

upd: https://jsfiddle.net/uctn217x/

Comment 2

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=7bdc9784d1aa7c089dacee29fe1001cceb1f9103&tochange=d1b7430e5ebbe7a782c76959e2c8e1d87a5107c6

Comment 3

[Daniel Holbert [:dholbert]]

TYLin, could you take a look?

Comment 4

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: 1698772.html (adapted from reporter's testcase in comment 1)

I added another <div> into the .content flex container, and the rendering matches my expectation because both flex items should be stretched to the flex container's height in the cross axis. Bug 1674302 fixed <table> elements so that they can be stretched correctly.

Comment 5

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: 1698772.html on Firefox 89.png

Comment 6

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: 1698772.html on Google Chrome 90.png

Comment 7

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: 1698772.html on Chrome 91.png

Comment 8

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

I'm close this bug as INVALID because stretching table flex items in the cross axis is an intentional behavior-change made to match the spec, and Google Chrome fixed the same bug that seems to ship in 91.

r3dz0r, thank you for filing the bug report with a minimal testcase so that we can identify the behavior easily!

Comment 9

[dr.rovico]

@TYLin

Dear Ting-Yu Lin,

I am still experiencing this issue in FF 87 and 88 and do not in Chrome 89.0.4389.128 or other browsers. Are there any steps for me to fix it if it is not a bug?

I am working on a big project, and this is the second time i get this error. The first one was together with r3dz0r (topic starter). I am 100% sure that our testing group will send me it again in a while. And I wanted to be ready to do something or to say soomething as my aliby

sincerelly, Pavel

In some reason I can't attach any screenshots, but I've managed it using sharing website https://snipboard.io/odJIxe.jpg

Comment 10

[Daniel Holbert [:dholbert]]

(In reply to dr.rovico from comment #9)

@TYLin

Dear Ting-Yu Lin,

I am still experiencing this issue in FF 87 and 88 and do not in Chrome 89.0.4389.128 or other browsers.

Note that TYLin mentioned that Chrome's behavior-change is expected to ship in Chrome 91 (see comment 8).

Are there any steps for me to fix it if it is not a bug?

You should be able to basically get the old behavior back by adding align-self: flex-start to your <table> elements. e.g. you could add this to your stylesheet:

table { align-self: flex-start }

Comment 11

[dr.rovico]

(In reply to Daniel Holbert [:dholbert] from comment #10)

You should be able to basically get the old behavior back by adding align-self: flex-start to your <table> elements. e.g. you could add this to your stylesheet:

table { align-self: flex-start }

Thank you very much! As I can see it now, It helps!

Comment 13

[Daniel Holbert [:dholbert]]

Great! I'm glad to hear it.

Comment 14

[Karl Dubost💡 :karlcow]

This seems to be https://bugs.chromium.org/p/chromium/issues/detail?id=1181403