iOS 11 iPhone X toolbar not respecting safe areas

Question

I have noticed that in the simulator using iPhone X, the tabBar increases dimension vertically to respect the safe area on the bottom of the screen. However toolbars added in storyboard do not and still maintain their default 44 height which causes the toolbarItems to be cutoff on the edges.

How would I duplicate the tabBar behavior for the toolbar on iPhone X without customizing the toolbar?

Answer 1

In order to be able to constrain items to the safe area in a storyboard, you need to enable "Use Safe Area Layout Guides" on the storyboard, in the Interface Builder Document section:

Once you've done that, you can, as mentioned in the other answer, constrain to the Safe Area: