What you’re observing is a common issue when combining CSS Grid layouts and shadow DOM, especially regarding how percentage heights are resolved.

The core problem:
In your .container class, you set height: 100%. For this to work, all ancestor elements—including your :host custom element—must have a defined height. However, setting only min-height on :host does not establish a definite height; it only sets a lower bound. As a result, .container (and its grid children) see their parent’s computed height as auto (i.e., undefined), so height: 100% collapses to zero.

Why does height: 0 “fix” it?
If you set height: 0 and combine it with min-height, browsers compute the element’s height as at least the min-height value. Now, the parent’s height is effectively known, and the grid’s height: 100% calculation produces the expected result. Without an explicit height, the reference point for height: 100% is missing.

Summary:

• height: 100% only works if all ancestor elements up to the root have an explicit height.
• min-height alone is not sufficient for descendants using height: 100%.
• Setting height: 0 (or height: auto) in combination with min-height provides a resolved height for children.

Possible solutions:

• Explicitly set height in :host, e.g., height: 0; min-height: 64px;
• Or consider not using height: 100% in the child grid, and let content or min-height determine sizing.
• Alternatively, use display: flex in the host if you want more intuitive height inheritance.