サイドバーと横並びにメイン画面を表示させたい

#■前提・実現したいこと
railsにて、ヘッダーとサイドバーは共通のビューを表示し、メイン画面は機能によって表示を変える様にしたいです。
現在の表示は添付の通りとなっており、ビューが正しく表示されておりません。親要素でdisplay:flex;を書けているものの、メイン画面を子要素として記述する事が出来ていない状況です。
お恥ずかしい限りではございますがお力添えを頂きたく投稿させて頂きました。何卒、よろしくお願いします????‍♂️

#■発生している問題・エラーメッセージ
サイドバー（添付画面左の緑色の部分）の下にメイン画像が表示されている状態です。
https://gyazo.com/3a287af61dfee7512f4877d0abda07bb

#■該当のソースコード（ビューは同じviews配下にディレクトリが存在します。）

□ビュー(ヘッダー・サイドバー実装)【layouts/application.html.erb】□
  <body>
    <%# ヘッダー %>
    <header class="header">
      <div class="container">
        <div class="logo_header">
          <%= link_to "logo", root_path ,class:"logo"%>
        </div>
      </div>
    </header>
    <div class="layout_page">
      <%# サイドバー %>
      <aside class="sidebar">
        <%# サイドバー ログイン・新規登録ボタン %>
        <div class="box">
          <% if user_signed_in? %>
            <ul class="area_register_sidebar">
              <%= link_to current_user.name, "#" ,class:"btn_new" %>
              <%= link_to "ログアウト", destroy_user_session_path, method: :delete ,class:"btn_loginin" %>
            </ul>
          <% else%>
            <ul class="area_register_sidebar">
              <%= link_to "新規登録", new_user_registration_path ,class:"btn_new" %>
              <%= link_to "ログイン", new_user_session_path ,class:"btn_loginin" %>                    
            </ul>
          <% end %>
        </div>
        <%# サイドバー 記録・検索・投稿ボタン %>
        <div class="box">
          <ul class="list_nav_sidebar">
            <%= link_to "記録", new_record_path %>
            <%= link_to "検索", "#" %>
            <%= link_to "投稿", articles_path %>
          </ul>
        </div>
      </aside>
    </div>
    <%= yield %>
  </body>

□ビュー（メイン画像の実装：トップページ）【tops/index.html.erb】□
<main>
  <div class="top-wrapper">
    <div class="top-page">野球しようぜ</div>
  </div>
</main>

□ CSS【style.css】□
/* ヘッダー・サイドバー */
.layout_page{
  display: flex;
} 
a {
  color: #F4F5F7;
  text-decoration: none;
}
.header {
  background-color: #29c4a0;
}
.container{
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.logo_header .logo {
  display: block;
  width: 80px;
  height: 30px;
  background-color: #29c4a0;
}
.sidebar {
  flex: 0 0 240px;
  background-color: #3ad6b2;
  height: 100vh;
}
.sidebar .box {
  padding: 50px 0;
}
.sidebar .box + .box {
  border-top: 1px solid #F4F5F7;
}
.area_register_sidebar a {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 0 0 60px;
  position: relative;
}
.area_register_sidebar a:before {
  content:"";
  display: block;
  width: 30px;
  height: 30px;
  background-color: #F4F5F7;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.list_nav_sidebar a {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 0 0 60px;
  position: relative;
}
.list_nav_sidebar a:before {
  content:"";
  display: block;
  width: 30px;
  height: 30px;
  background-color: #F4F5F7;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
/* メイン（トップページ） */
.top-wrapper {
  /* display: inline-block; */
  width: 100%;
}
.top-page {
  text-align: center;
  background-image: url(top.jpeg);
  background-size:  cover;
  height: 100VH;

#■試したこと
①apprication.html.erbファイルにメイン画像の実装を反映
→正しく反映されるが、トップページ以外の画面表示が出来ない
②ビュー（メイン画像の実装：トップページ）【tops/index.html.erb】の記述の上に、<div class=“layout_page”>を追記
→正しく表示されない
#■補足情報（FW/ツールのバージョンなど）
rails：6.0.0

workshajikoma

2021/04/13 13:52

・サイドバー（aside要素）とメイン画面（main要素）を横並びにしたい・<%= yield %> 部分にtops/index.html.erbの中身が入る構成であっていますか？

hirokazu.nakao

2021/04/13 14:05

ご質問ありがとうございます。今ビュー表示するものとしては「トップページ」「新規登録」「ログイン」「記録」「投稿」「検索」が有ります。各ボタンを押した時に該当するビューをメインに反映させたいです！理解不足で申し訳ございません。質問の回答になっておりますでしょうか？

hirokazu.nakao

2021/04/13 14:08 編集

以下の余白がメインとなります。「logo」をクリックすると、トップページに遷移、「ログイン」を押すとログイン入力フォームのビューを反映させたいです。 https://gyazo.com/1470af660353cc4e4a5a68ff5a95e3d6

workshajikoma

2021/04/14 12:31

なるほど。<%= yield %> を一行上に移動させ、<div class="layout_page">の子要素としたらどうでしょうか。 Flexboxは、親要素にdisplay: flexを指定することで子要素のレイアウトを定義します。今は.layout_pageのdiv要素とmain要素とが兄弟関係にあります。

hirokazu.nakao

2021/04/14 12:41

ご指摘頂きました内容にて修正し、見事に解決しました！大変助かりました。ご指摘の通り、yieldを1行上に移動させる事で、layout_pageとの親子関係が成立し、横並びになりました???? ありがとうございました！

workshajikoma

2021/04/14 12:44

よかったです。回答として記載しなおしました。

行動規範の内容に同意します

回答1件

ベストアンサー

<%= yield %> を一行上に移動させ、<div class="layout_page">の子要素としたらどうでしょうか。
Flexboxは、親要素にdisplay: flexを指定することで子要素のレイアウトを定義します。
今は.layout_pageのdiv要素とmain要素とが兄弟関係にあります。

投稿2021/04/14 12:44

workshajikoma

総合スコア110