I'm still trying to get a grid layout that used to work in Chrome 80
working again.

The current issue I have is to get a vertical scrollbar to appear on a
grid item when its contents grow taller than the item and the item does
not have a specific height set eg. its height is 1fr.

With this item

<ol id="an-item">
<li>one</li>
</ol>

it works but with this

<ol id="an-item">
<li>one</li>
<!-- 38 list items here... -->
<li>forty</li>
</ol>

Where the grid's css is {
display:grid;
grid-template-columns: 140px;
grid-template-rows: 1fr;
height:100vh;
}

body {
margin:0;
}

#an-item {
grid-column:1;
grid-row:1;
}

the list forces the grid item's row height to grow to match the height
of the list. This does not happen in either Firefox or Opera (where a
vertical scrollbar "correctly" appears). I can workaround it by setting
a height for the grid item using calc() though I'd rather not have to.

Surely others are hitting the same issue!

Is there a way to get Chrome to behave?

Andrew Poulos

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

In-Reply-To: <r_mdnYLRGeyCGdbDnZ2dnUU7-TXNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

I'm still trying to get a grid layout that used to work in Chrome
80 working again.

The current issue I have is to get a vertical scrollbar to appear on
a grid item when its contents grow taller than the item and the item
does not have a specific height set eg. its height is 1fr.

[snip]

https://www.w3.org/TR/css3-grid-layout/#fr-unit

¦ When the available space is infinite (which happens when the grid
¦ container’s width or height is indefinite), flex-sized grid tracks
¦ are sized to their contents while retaining their respective
¦ proportions.

Still using the same example post earlier?

| grid-template-rows:
| 28px /* first row #layout_controls */
| minmax(auto, var(--layout-con-height)) /* second row
#layout_frame */
| 25px /* third row #layout_title */
| 1fr /* fourth row does not exist */ ;

#controls & #grid_spacer have grid-row: 1 / 5 starts at row 1 stops
at the begging of row 5, row 4 does not exist.

Change the grid-row to 1 / 4 | remove the 1fr | set the 1fr to a fixed
length.

#layout_con with position width and height set ?

Overflow default is visible.

Avoid using fr unit.

Try using min/max width/height rather than width/height

--
James Kirk

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On 19/02/2020 5:40 am, James Kirk wrote:

In-Reply-To: <r_mdnYLRGeyCGdbDnZ2dnUU7-TXNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

I'm still trying to get a grid layout that used to work in Chrome
80 working again.

The current issue I have is to get a vertical scrollbar to appear on
a grid item when its contents grow taller than the item and the item
does not have a specific height set eg. its height is 1fr.

[snip]

https://www.w3.org/TR/css3-grid-layout/#fr-unit

¦ When the available space is infinite (which happens when the grid
¦ container’s width or height is indefinite), flex-sized grid tracks
¦ are sized to their contents while retaining their respective
¦ proportions.

Still using the same example post earlier?

| grid-template-rows:
| 28px /* first row #layout_controls */
| minmax(auto, var(--layout-con-height)) /* second row
#layout_frame */
| 25px /* third row #layout_title */
| 1fr /* fourth row does not exist */ ;

#controls & #grid_spacer have grid-row: 1 / 5 starts at row 1 stops
at the begging of row 5, row 4 does not exist.

Change the grid-row to 1 / 4 | remove the 1fr | set the 1fr to a fixed length.

#layout_con with position width and height set ?

Overflow default is visible.

Avoid using fr unit.

Try using min/max width/height rather than width/height

Thanks for the response but in my current case the grid container's
height is not infinite (it's set too 100vh) and I specifically don't
want to set a fixed length for the grid item's height.

Also It works fine in Chrome 79, Firefox and Opera. It fails in Chrome 80.

Andrew Poulos

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

This is a multi-part message in MIME format.
On 18/02/2020 20:35, Andrew Poulos wrote:

On 19/02/2020 5:40 am, James Kirk wrote:

In-Reply-To: <r_mdnYLRGeyCGdbDnZ2dnUU7-TXNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

I'm still trying to get a grid layout that used to work in Chrome
80 working again.

The current issue I have is to get a vertical scrollbar to appear on
a grid item when its contents grow taller than the item and the item
does not have a specific height set eg. its height is 1fr.

[snip]

https://www.w3.org/TR/css3-grid-layout/#fr-unit

¦ When the available space is infinite (which happens when the grid
¦ container’s width or height is indefinite), flex-sized grid tracks >> ¦ are sized to their contents while retaining their respective
¦ proportions.

Still using the same example post earlier?

| grid-template-rows:
| 28px /* first row #layout_controls */
| minmax(auto, var(--layout-con-height)) /* second row
#layout_frame */
| 25px /* third row #layout_title */
| 1fr /* fourth row does not exist */ ;

#controls & #grid_spacer have grid-row: 1 / 5 starts at row 1 stops
at the begging of row 5, row 4 does not exist.

Change the grid-row to 1 / 4 | remove the 1fr | set the 1fr to a fixed
length.

#layout_con with position width and height set ?

Overflow default is visible.

Avoid using fr unit.

Try using min/max width/height rather than width/height

Thanks for the response but in my current case the grid container's
height is not infinite (it's set too 100vh) and I specifically don't
want to set a fixed length for the grid item's height.

In that case set it to:

max-height: 100vh;

--
With over 1.2 billion devices now running Windows 10, customer
satisfaction is higher than any previous version of windows.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body text="#006600" bgcolor="#FFFFE0">
<div class="moz-cite-prefix">On 18/02/2020 20:35, Andrew Poulos
wrote:<br>
</div>
<blockquote type="cite"
cite="mid:m-KdnUGQmNAB19HDnZ2dnUU7-LXNnZ2d@westnet.com.au">On
19/02/2020 5:40 am, James Kirk wrote:
<br>
<blockquote type="cite">In-Reply-To:
<a class="moz-txt-link-rfc2396E" href="mailto:r_mdnYLRGeyCGdbDnZ2dnUU7-TXNnZ2d@westnet.com.au">&lt;r_mdnYLRGeyCGdbDnZ2dnUU7-TXNnZ2d@westnet.com.au&gt;</a>
<br>
Andrew Poulos <a class="moz-txt-link-rfc2396E" href="mailto:ap_prog@hotmail.com">&lt;ap_prog@hotmail.com&gt;</a> wrote:
<br>
<br>
<blockquote type="cite">I'm still trying to get a grid layout
that used to work in Chrome
<br>
80 working again.
<br>
</blockquote>
<br>
<blockquote type="cite">The current issue I have is to get a
vertical scrollbar to appear on
<br>
a grid item when its contents grow taller than the item and
the item
<br>
does not have a specific height set eg. its height is 1fr.
<br>
</blockquote>
<br>
[snip]
<br>
<br>
<a class="moz-txt-link-freetext" href="https://www.w3.org/TR/css3-grid-layout/#fr-unit">https://www.w3.org/TR/css3-grid-layout/#fr-unit</a>
<br>
<br>
   ¦ When the available space is infinite (which happens when
the grid
<br>
   ¦ container’s width or height is indefinite), flex-sized grid
tracks
<br>
   ¦ are sized to their contents while retaining their
respective
<br>
   ¦ proportions.
<br>
<br>
Still using the same example post earlier?
<br>
<br>
   | grid-template-rows:
<br>
   | 28px /* first row #layout_controls */
<br>
   | minmax(auto, var(--layout-con-height)) /* second row
<br>
     #layout_frame */
<br>
   | 25px /* third row #layout_title */
<br>
   | 1fr /* fourth row does not exist */ ;
<br>
<br>
#controls &amp; #grid_spacer have grid-row: 1 / 5 starts at row
1 stops
<br>
at the begging of row 5, row 4 does not exist.
<br>
<br>
Change the grid-row to 1 / 4 | remove the 1fr | set the 1fr to a
fixed
<br>
length.
<br>
<br>
#layout_con with position width and height set ?
<br>
<br>
Overflow default is visible.
<br>
<br>
Avoid using fr unit.
<br>
<br>
Try using min/max width/height rather than width/height
<br>
<br>
</blockquote>
Thanks for the response but in my current case the grid
container's height is not infinite (it's set too 100vh) and I
specifically don't want to set a fixed length for the grid item's
height.
<br>
</blockquote>
<br>
In that case set it to: <br>
<br>
<br>
<blockquote type="cite">
<div style="color: #d4d4d4;background-color: #1e1e1e;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 14px;line-height: 19px;white-space: pre;"><div><span style="color: #9cdcfe;">max-height</span><span style="color: #
d4d4d4;">: </span><span style="color: #b5cea8;">100vh</span><span style="color: #d4d4d4;">;</span></div></div>
</blockquote>
<br>
<br>
<blockquote type="cite"
cite="mid:m-KdnUGQmNAB19HDnZ2dnUU7-LXNnZ2d@westnet.com.au">
<br>
<br>
<br>
<br>
</blockquote>
<br>
<br>
<div class="moz-signature">-- <br>
<div style="width: 330px; background-color: blue; color:
yellow;font-weight: bolder; font-size:150%; text-align: center;
margin: 30px 5px 30px 5px;">With over 1.2 billion devices now
running Windows 10, customer satisfaction is higher than any
previous version of windows.</div>
</div>
</body>
</html>

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On 19/02/2020 8:53 am, 😉 Good Guy 😉 wrote:

On 18/02/2020 20:35, Andrew Poulos wrote:

On 19/02/2020 5:40 am, James Kirk wrote:

In-Reply-To: <r_mdnYLRGeyCGdbDnZ2dnUU7-TXNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

I'm still trying to get a grid layout that used to work in Chrome
80 working again.

The current issue I have is to get a vertical scrollbar to appear on
a grid item when its contents grow taller than the item and the item
does not have a specific height set eg. its height is 1fr.

[snip]

https://www.w3.org/TR/css3-grid-layout/#fr-unit

   ¦ When the available space is infinite (which happens when the grid >>>    ¦ container’s width or height is indefinite), flex-sized grid tracks
   ¦ are sized to their contents while retaining their respective
   ¦ proportions.

Still using the same example post earlier?

   | grid-template-rows:
   | 28px /* first row #layout_controls */
   | minmax(auto, var(--layout-con-height)) /* second row
     #layout_frame */
   | 25px /* third row #layout_title */
   | 1fr /* fourth row does not exist */ ;

#controls & #grid_spacer have grid-row: 1 / 5 starts at row 1 stops
at the begging of row 5, row 4 does not exist.

Change the grid-row to 1 / 4 | remove the 1fr | set the 1fr to a fixed
length.

#layout_con with position width and height set ?

Overflow default is visible.

Avoid using fr unit.

Try using min/max width/height rather than width/height

Thanks for the response but in my current case the grid container's
height is not infinite (it's set too 100vh) and I specifically don't
want to set a fixed length for the grid item's height.

In that case set it to:

max-height: 100vh;

I've rebuilt the layout from scratch using some of the ideas James Kirk provided and staying away from minmax and calc and now the layout works
without needing to specify a length for the height of the grid item.

Still for something that worked in Chrome 79- and still works in Firefox
and Opera I'm certain it's a CSS bug in Chrome 80.

Andrew Poulos

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

Andrew Poulos <ap_prog@hotmail.com> wrote on 19 Feb 2020 in comp.infosystems.www.authoring.stylesheets:

Still for something that worked in Chrome 79- and still works in Firefox
and Opera I'm certain it's a CSS bug in Chrome 80.

No, that is not a valid conclusion in general.

It is just as likely ***in general**,
that bug against the specs was removed/repaired,
a bug you used, because you and the earlier implementators
both misunderstood the specs.

Usually the repair is made allowing the old code gracefully to work,
but this is not allways possible or safe, I suspect.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

In-Reply-To: <XnsAB687CDB9E795eejj99@194.109.6.166>
Evertjan. <exxjxw.hannivoort@inter.nl.net> wrote:

Andrew Poulos <ap_prog@hotmail.com> wrote on 19 Feb 2020 in comp.infosystems.www.authoring.stylesheets:

I've rebuilt the layout from scratch using some of the ideas James
Kirk provided and staying away from minmax and calc and now the
layout works without needing to specify a length for the height of
the grid item.

Was the layout completed before the update?

Still for something that worked in Chrome 79- and still works in
Firefox and Opera I'm certain it's a CSS bug in Chrome 80.

No, that is not a valid conclusion in general.

It is just as likely ***in general**,
that bug against the specs was removed/repaired,
a bug you used, because you and the earlier implementators
both misunderstood the specs.

Usually the repair is made allowing the old code gracefully to work,
but this is not allways possible or safe, I suspect.

Perhaps.

In version 80.0.3987.116 … the original posted example may be
displaying as Andrew Poulos intended.


--
James Kirk

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

James Kirk <noneya.invalid@gmail.com> wrote on 19 Feb 2020 in comp.infosystems.www.authoring.stylesheets:

Still for something that worked in Chrome 79- and still works in
Firefox and Opera I'm certain it's a CSS bug in Chrome 80.

No, that is not a valid conclusion in general.

It is just as likely ***in general**,
that bug against the specs was removed/repaired,
a bug you used, because you and the earlier implementators
both misunderstood the specs.

Usually the repair is made allowing the old code gracefully to work,
but this is not allways possible or safe, I suspect.

Perhaps.

In version 80.0.3987.116 ƒ Ý the original posted example may be
displaying as Andrew Poulos intended.

No, not "perhaps", this has nothing to do with intent. You cannot conclude
that something not working the same is a bug just because of that. Well, not **correctly** concluding.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

In-Reply-To: <XnsAB68E8D3F96FEeejj99@194.109.6.166>
Evertjan. <e..j.w.hannivoort@inter.nl.net> wrote:

James Kirk <noneya.invalid@gmail.com> wrote on 19 Feb 2020 in comp.infosystems.www.authoring.stylesheets:

Evertjan. <e..j.w.hannivoort@inter.nl.net> wrote:

Andrew Poulos <ap_prog@hotmail.com> wrote:

Still for something that worked in Chrome 79- and still works in
Firefox and Opera I'm certain it's a CSS bug in Chrome 80.

No, that is not a valid conclusion in general.

It is just as likely ***in general**, that bug against the specs
was removed/repaired, a bug you used, because you and the earlier
implementators both misunderstood the specs.

Usually the repair is made allowing the old code gracefully to
work, but this is not allways possible or safe, I suspect.

Perhaps.

In version 80.0.3987.116 … the original posted example may be
displaying as Andrew Poulos intended.

No, not "perhaps", this has nothing to do with intent. You cannot
conclude that something not working the same is a bug just because
of that. Well, not **correctly** concluding.

Perhaps:
⛤ conceivably
⛤ maybe
⛤ possibly
⛤ not certainly

Perhaps:
☠ it is/was a bug
☠ it is/was not a valid conclusion
☠ it is/was just as likely …
☠ the repair …

⌘ version 80.0.3987.116 comment was just a point of interest

Stable Channel Update for Desktop Windows:
✺ February 18, 2020 ⇒ 80.0.3987.116
✺ February 13, 2020 ⇒ 80.0.3987.106
✺ February 11, 2020 ⇒ 80.0.3987.100
✺ February 4, 2020 ⇒ 80.0.3987.87

Conclusions. The only conclusions I personally have made:
• Chrome has updated in the past.
• Chrome has updated in the time span of this thread.
• Chrome will likely update in the future.

I presume that more than the version number has changed.

--
James Kirk

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

James Kirk <noneya.invalid@gmail.com> wrote on 20 Feb 2020 in comp.infosystems.www.authoring.stylesheets:

I presume that more than the version number has changed.

Livingstone, I presume?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)