Bug 243310 – Incorrect column-width with inline-size: {fit, max}-content and column-fill: auto

• Status: NEW
• Component: Layout and Rendering

[BenjaminAster]

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.

[Radar WebKit Bug Importer]

<rdar://problem/97885358>