Bug 251290 - Flex item containing an image in column layout is sized to intrinsic image width instead of computed image width
Summary: Flex item containing an image in column layout is sized to intrinsic image wi...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 15
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-01-27 13:47 PST by Cole
Modified: 2023-02-03 13:48 PST (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Cole 2023-01-27 13:47:29 PST
Live reproduction can be viewed here: https://codesandbox.io/s/lucid-margulis-3c7v8e?file=/index.html

Note that the `div` elements (visualized with a blue border) take on the intrinsic widths of their image children, rather than the computed image width (as expected). This currently also fails on Firefox (see https://bugzilla.mozilla.org/show_bug.cgi?id=1344525), but performs correctly on Chrome, where the divs are sized according to their image child's computed width.

Setting `display: contents` on the `div`s does resolve this layout issue, but prevents any styles from being applied to the `div`s themselves, and also breaks scroll snapping behaviour if the flex container is set to allow its contents to overflow with scrolling.
Comment 1 Karl Dubost 2023-01-29 17:40:33 PST
This affects the layout too. 

section div {
  height: 100%
}

There's another bug on Mozilla bug for this. I can't find it right now.
Comment 2 Radar WebKit Bug Importer 2023-02-03 13:48:19 PST
<rdar://problem/105019330>