with-wrapper | React HOC for wrapper components | Frontend Utils library

The wrappers are causing trouble because a div doesn't have any flex css properties, While the .card classes are using flex:1 0 0;

Option 1 (preferred): Apply the .card class to the angular host element wrapper, instead of the first child element.
I've not used angular, going by these docs you could set a class on the host element. Using @Component.host.

Or define some rules using angulars custom renderer. I can't advice you on the best approach, I lack the knowledge on angular.

In the end you would want to end up with

Option 2 (not very sane): Pretend that the wrappers are cards,
and style them like a card would be styled.
I would advice against this.
It can cause troubles in the long run. IE newer bootstrap versions could change the css styling, and you might forget to update these custom rules.