When using FluentCard and placing components inside of it that may overflow the boundaries of that Card-Component you may run into issues. But that is by design. There is a GitHub-Issue where a developer explains that and also offers an solution for those who want the FluentCard-component to overflow:
To have a FluentCard overflow you have to disable the „content-visibility„:
<FluentCard Style="content-visibility: inherit; contain: inherit;">
...
</FluentCard>Be aware, that it may mess with some elements, that use „position: absolute;“, at least it did in my case.
Also for the DataGrid i found, that content-visibility does not help to have a dropdown-list property overflow the cell. So for the DataGrid you need to override the css-class like this:
fluent-data-grid-cell {
overflow: visible;
}Source: https://github.com/microsoft/fluentui-blazor/issues/825
