In CSS multi-column layout, WebKit renders columns with a wrong column-width if column-fill is auto and the element's inline-size is either fit-content or max-content. If inline-size is fit-content, the width of the columns becomes a fraction of the viewport's width, which should not happen. If inline-size is max-content, the width of the columns becomes slightly more than specified in the column-width property, which also should not happen. Steps to reproduce: - visit this URL: https://benjaminaster.com/bugs/column-width/ - click "fit-content" or "max-content" to get to the respective page Result: The red box should align with a column's width, but doesn't. The red box is positioned absolutely and has dimensions of 50 x 5 rem. You can view the source code of the page in DevTools or by viewing the page source. The CSS of the body element looks like this: ```css body { margin: 0; block-size: 100vh; column-width: 50rem; inline-size: fit-content; /* or max-content, depending on the demo page */ column-gap: 0; column-fill: auto; } ``` Other browsers: - Gecko (Firefox): renders everything correctly (see screenshots) - Blink (Chromium): has pretty much the same bug (see screenshots) Here are two screenshots for fit-content and max-content. Chrome is at the top, Firefox in the middle, and Epiphany (WebKit) at the bottom: - fit-content: https://user-images.githubusercontent.com/63414473/181626656-a833027d-e489-4251-a187-fdf377bf8324.png - max-content: https://user-images.githubusercontent.com/63414473/181626671-955d9913-6d33-4578-9d05-28a66f86759a.png (bugs.webkit.org won't let me upload more than one image attachment, so I use GitHub image links instead) Tested in Epiphany nightly 43~alpha, which roughly equivalates Safari 16.0.
<rdar://problem/97885358>