Display contents

The Display Contents css property removes the effects of an element on the page. It can be compared to React's Fragment for layout.

Given that you have a div that has display: flex (A), which contains another div (B), which contains two children (C). Imagine that you want the grandchildren (C) to partake in the grandparents' (A) flex layout (display them in a row). It would look something like this:

<div className="flex flex-row">
  <div>
    <div className="w-10 h-10 bg-yellow-500"></div>
    <div className="w-10 h-10 bg-green-500"></div>
  </div>
</div>

And would be displayed as follows:

With display contents we can easily remove the effects of the parent div (B) on the layout.

<div className="flex flex-row">
  <div className="contents">
    <div className="w-10 h-10 bg-yellow-500"></div>
    <div className="w-10 h-10 bg-green-500"></div>
  </div>
</div>

This is especially useful if you don't have control over a certain element. HTML5 custom elements for example — which are used extensively in Angular — do affect the layout of the page, yet they cannot easily be removed. Display contents offers a solution here.

<my-custom-element></my-custom-element>

my-custom-element {
  display: contents;
}