Alternative for display:contents in Chrome?

Question

What is the alternate solution to implement the following in chrome.

display:contents;

Currently only firefox supports them in all versions.

Is there any other way to get the same features as this css tag.

Caniuse is out of date, it's said to be enabled in Chrome 65. https://www.chromestatus.com/feature/5663606012116992 https://crbug.com/657748 https://groups.google.com/a/chromium.org/d/topic/blink-dev/XzdNrEvn4Qk — Josh Lee, Jan 31 '18 at 11:45
https://codepen.io/paulobrien/pen/jYYKmB appears to be doing it in browser without support for it. Tested in Chrome and works. Resize browser window. — tao, Dec 05 '18 at 23:16

score 2 · Accepted Answer · answered Dec 17 '18 at 11:16

2

You can use an alternative approach, instead using display:content (that is marked as experimental at the moment) you can create a container class and add the property display:grid, and, in case the browser supports display:content use it with this code:

@supports (display: contents) {
  article { display: contents; }
}

answered Dec 17 '18 at 11:16

Antonio Baena Guerrero

147
15

2

Can you flesh this out with a fuller example, including the container? – Dan Gayle May 20 '20 at 23:01

score 1 · Answer 2 · answered Jun 01 '21 at 20:36

1

.display-contents {
    display: flex;
    flex-wrap: wrap;
}

answered Jun 01 '21 at 20:36

Unzeabk

11
1

worked like a charm! thanks – Stephani Bishop Jun 19 '23 at 20:54

Alternative for display:contents in Chrome?

2 Answers2

Linked