Auto-sizing flex container to suit contents

I feel I should know the answer to this but can’t think of the solution.

This flex container will be used in an embedded view. Normally just the date picker will be visible so I want the flex container to be sized appropriately. When the warning message display property is set to true the flex container should expand to accommodate it. This view will be used as an embedded view on other views.

How should I achieve that?

[I’m aware of how to limit the date picker select range. This is a stripped down version of my date / shift picker.]*

Unless I’m missing something here, I think that wherever you embed this view, you will just need to set the position.basis to “auto” as long as you are embedding this view within another flex container (otherwise you would not have a position.basis property).