Width and height in CSS does not work properly, The parent height takes priority over the child height.

In order for something like height: 50% to work, the parent’s height can’t depend on the child’s height.

A fixed height works just fine. There is one thing to consider though

when we tell

to have height: 50%, that percentage isn’t based on the parent element’s total size, it’s based on the parent’s “content box”. This is the space inside the element, within its border and padding.

It doesn't work with min-height because the size of the element is dynamic.

CSS Grid's children will grow to fill their grid cell as if they have a height: 100%. Another approach is to use flexbox with flex: 1 on the child.

Layouts are mini-languages indeed. See https://shaarli.lyokolux.space/shaare/TPKfkQ