大枠の要素を2:8で横並びにしたい

Question

要素を横並びにしたいです。
サイドメニューとメインメニューをイメージしています。

大きさはサイドが高さ100%、幅20%
メインが高さ100%、幅20%

しかしdisplyflexやinlineblockなど試してもどうしてもメインメニューがサイドの下に潜り込んでしまいます。
その時サイドは高さが小さくなっています。
解決方法はあるでしょうか？

追記：アドバイス頂いたソースです。
画面は真っ白です。vue.jsなのでtemplateに対するクラス定義のミスでしょうか。

<template class = "top">
  <v-app class = "top2">
    <div class = "side"></div>
    <div class = "main"></div>
  </v-app>
</template>

<style>
.top {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.top2 {
  display: flex;
  height: 100%;
}
.side {
  width: 20%;
  background-color: blue;
}
.main {
  width: 80%;
  background-color: red;
}
</style>

Comments

[thyda.eiqau]

ご提示のコードでは横並びにするような指定が入っていないので、当然横並びにはなりません。
横並びにしようとして、flex等を指定されようとしたときのコードをご提示されたほうがいいと思います。

[shirout]

提示させていただきました。
ご指摘ありがとうございます。

Answer 1

.top {
  height: 100%;
  width: 100%;
}
.top2 {
  display: flex;
  height: 100%;
}
.side {
  width: 20%;
  background-color: blue;
}
.main {
  width: 80%;
  background-color: red;
}

https://codepen.io/eiqau/pen/vYKQaRo

Comments

[shirout]

ご丁寧にありがとうございます。
リンクの記事通り記述しましたが高さがなくなり画面真っ白です。
vuetifyを使っているのでこちらのクラス定義に誤りがあるのでしょうか？

```
<template class = "top">
<v-app class = "top2">
```

[thyda.eiqau]

CSSはあくまでHTMLに適用するものです。Vueでどのように出力しているのかはあなたにしかわかりませんので、Vueで吐き出しているHTMLに合わせて適宜修正してください。としか言いようがないですね。
おそらく親要素への高さの指定が足りないのではないかと思いますが、これ以上踏み込んだ回答を出すためにはHTMLのご提示（Vueのコードではなく、Vueが出力しているHTML）が必要です