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

`display: flex`を使用する要素と、報告で説明されている`hide-on`または`show-on`の動作で問題を再現します。これらのSCSSユーティリティがdisplay値をどのように設定しているかを調べます。完了の条件は、表示状態の変更によって要素の既存の非ブロックdisplayモードが置き換えられなくなることです。

索引モデルが issue の本文から書いたものです。