The datepicker is actually a input type=text and has a class “form-control” which is a CSS flexbox child with value 1 (meaning this element will occupy the remaining space) 

That is why it stretches compared to other children of its parent container.

You can override this by targeting that input element in CSS and may be do max-width: fit-content or max-width of your own to limit that to a specific width.

Having said all these, have the the flex:1 caters for all cases that is for any width of the container, the date picker input box expands or contracts to fit the existing space.

Let me know this helped you.