1873617 - grid with percentage value height and grid-auto-columns has width linear in number of items, not number of columns

Status: RESOLVED DUPLICATE of bug 1930672

(Core :: Layout: Grid, defect, P3)

Description

[mail]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:120.0) Gecko/20100101 Firefox/120.0

Steps to reproduce:

The following snippet produces a red grid container over a blue outer container. The grid auto flows in column direction and has enough items to need at least two columns. The grid container is limited to 100% height (using a percentage value here is crucial to reproduce the bug!) and has grid-auto-columns set to a non-default value (equally crucial).

<div style="
width: 350px;
background-color: blue;
height: 130px;
padding: 0.5em;
	">
<div style="
display: grid;
grid-template-rows: repeat(auto-fit, 30px);
grid-auto-columns: 50px;
grid-auto-flow: column;
background-color: red;
height: 100%;
width: min-content;
">
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<p>test5</p>
<p>test6</p>
<p>test7<p>
<p>test8</p>
<p>test9</p>
</div>
</div>

Actual results:

The grid container (in red) is much wider than its contents and its width seems to scale linearly with the number of items instead of the number of automatically generated columns.

Expected results:

The grid container should be exactly as wide as the number of columns dictate. This result can be achieved by using a fixed value for its height or using the default value for grid-auto-columns.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Grid' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Attachment: test-case from reporter.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Thanks for the report! This doesn't seem like a particularly recent regression.

Tiaan, you've been looking at grid recently, this might be an easy-ish fix?

Comment 4

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

This bug is fixed by bug 1930672.