This page doesn't test an Elix component directly, but exercises grid styling used in some Elix components to deliver the Size to Content criteria on the Gold Standard Checklist for Web Components.

Below, the dotted gray border shows the bounds of a sample component, while the pink solid border shows the bounds of the content inside that component. We want these borders to touch, confirming that the outer element and its inner content are resizing as expected.

This content has a natural size, and the outer element tightly fits it.
This content defines a size, and again the outer element fits it.
Here the outer element defines a size, which stretches the content inside to match.
Here both the outer element defines a fixed size, and the content defines a size that's bigger than that. The outer element must provide the user some way (like scrolling) to see the complete content.
This element has a fixed size, and two children: this one…
…and this one. The children split the available space.
This also has children. This first child is tall enough to force scrolling.
This is the second child.