BootstrapのCardの中でタブを縦に並べようとしたらハマった

仕事でBootstrapを用いた画面開発をしています。
そんな中でタブを縦に並べる事に苦戦してしまったので、備忘録も兼ねて記事にしておきます。

同じような方がいれば、参考になれば幸いです。では、早速いきましょ！

card-bodyの中でflex-direction:columnを使うとバグる

いきなり問題の個所です。事象とソースを確認しましょう。

まず、目指していたのはこんな感じのタブです。↓

上の図のようなタブを、Bootstrapのcardの中に突っ込みたかったんですね。で、
サンプルソースをそのまま引用してみると、こんな形になります。↓

図中にも書きましたが、コンテンツの表示位置が想定と異なる結果になりました。。

表示位置がおかしい場合の解決策

cssに1行追加すると解決できます。

.tab-wrap {
    position: absolute; /* <- こちらを追加 */
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.tab-wrap の要素を軸に .tab-content に対するcssが効いてくるので、
親要素を固めておく必要がありました。お役に立てれば幸いです。