Custom legend with margin pushes chart canvas out of container

[nickofthyme]

Describe the issue

When using a CustomLegend the sizing of the legend is not well supported.

If the custom legend children apply a margin, the computed legend size is smaller than what the actual legend takes up causing the chart canvas to be pushed out of the container.

If the custom legend children height is larger than 34px, The legend will overflow into the chart canvas element.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/p/sandbox/peaceful-hooks-4zxr9z?file=%2Fsrc%2FApp.tsx%3A96%2C33
2. See the chart pushed out of the container on the bottom.
3. Note the size styles applied to the div wrapping the custom legend component, overly constraining the custom legend.

Expected behaviour
Custom legend is sized based on the element passed to charts

Screenshots

Notice the bottom of the legend is cut off.

Additional context

For the CustomLegend we wrap the passed element with a div which we can custom sizing styles.

elastic-charts/packages/charts/src/components/legend/legend.tsx

Lines 117 to 120 in 3bddec8

	<div className={legendClasses} style={positionStyle} dir={isMostlyRTL ? 'rtl' : 'ltr'}>
	{config.customLegend ? (
	<div style={containerStyle}>
	<CustomLegend

With our built-in legend we are able to compute the height/width without the need to call getBoundingClientRect. But with the custom legend I think this should be flexible and we should size the chart based on the dynamic size of the legend the user passes.