We have created Cards which can be resized and moved around by the user. In some of these Cards, we want to embed a Datagrid which is supposed to "fill" the available space (e.g. a card-block).
I am able to control the width, but haven't found a way to control the height in my scenario. Here, the Datagrid grows way outside my Card, even pushing down the card-footer.
Here is a StackBlitz example which shows the behavior.
BTW, the trick with "height: 100%" doesn't seem to work in my scenario.
Any help would be appreciated.
As mentioned in my comment, to use height: 100% you need the parent to have a defined height. Except in your case, it's all dynamic up to the card itself, so you have to propagate that height: 100% down to the datagrid. I updated your plunker with this, and it works fine now: https://stackblitz.com/edit/fit-datagrid-in-card
See https://drafts.csswg.org/css2/visudet.html#propdef-height for the height explanation:
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified. A percentage height on the root element is relative to the initial containing block.