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.