Flex display breaking Header bar buttons


I am using custom SVG icons for displaying navigation buttons in header, such as menu button, or the back button.
I want to vertically align the buttons and I thought of using display flex for same, however, trying to use display flex for header buttons breaks the header bar buttons.

Here is code pane explaining the problem:

I am not sure why it’s creating a problem. Why changing a display property is making navigation buttons go haywire?