display:inline-table has a 100% height inside a flex container not the size of its content.
Categories
(Core :: Layout: Flexbox, defect)
Tracking
()
| Webcompat Priority | ? |
People
(Reporter: karlcow, Unassigned)
References
(Regression, )
Details
(Keywords: regression)
Attachments
(1 file)
|
226 bytes,
text/html
|
Details |
Bug 1674302 has regressed a website as exhibited in https://webcompat.com/issues/70298
mozregression gives https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=7bdc9784d1aa7c089dacee29fe1001cceb1f9103&tochange=d1b7430e5ebbe7a782c76959e2c8e1d87a5107c6
https://codepen.io/webcompat/pen/ExZLqNQ
Or
data:text/html,<!doctype html><div style="display:flex;flex-direction:row;"><div style="background-color:gold; display:inline-table">Short item</div><div style="background-color:pink; height: 100px;display:inline-table">High item</div></div>
Is it a chrome bug or a firefox bug?
The left short item is as tall as the right one in Firefox
and in Chrome is just as tall as if we had put height: max-content
|
||
Updated•4 years ago
|
|
||
Comment 1•4 years ago
|
||
This is the same as bug 1698772, which is to say it's an intentional behavior-change to match the spec.
Chrome has made the same behavior-change -- it's not in their release version, but you can see them matching us in Chrome 91 (currently available as their "dev" version). It matches our behavior on the data URI from comment 0 -- it renders the left and right side at the same boxy height.
If a web developer wants the old behavior, they can add align-self:flex-start to the style of any <table> elements that are children of flex containers, and that will restore the old behavior. (It overrides the default align-self:stretch behavior, which we and Chrome didn't properly implement for tables until now.)
|
Reporter | |
Comment 2•4 years ago
|
||
Just for not forgetting https://bugs.chromium.org/p/chromium/issues/detail?id=1181403
In the current Edge Chromium Version 91.0.858.0 (Version officielle) Canary(x86_64)
We can still see the old behavior. The item is not stretched. So not released on Edge at least.
|
||
Updated•4 years ago
|
|
||
Updated•4 years ago
|
Description
•