When using hide-on and show-on to change the visibility of an element set to display: flex; it seems to override the existing display mode and set it to block which is undesired. Setting show-on to display: inherit seems to have fixed this for me but I don't feel confident enough in my CSS skills to just go and submit a PR for this issue!
Would appreciate it if somebody a little more knowledgeable wouldn't mind testing this ;P