hide-on & show-on seem to break anything that isn't set as display block

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