CSS body部分の表示がヘッダー部分に被って表示されてしまいます！（突き抜けて見えない）

前提・実現したいこと

rails を使ってのメモ機能実装中です。
非同期通信は完成し、cssの調整に入っているのですが、
メモの詳細がブロック内に収まってくれません。

ヘッダーが存在し、ボディ部分にメモ情報をoverflow: scroll;を使って表示させたいのですが、メモ内容がヘッダーを突き抜けて表示されてしまい。最新のもの何個か表示が見えなくなってしまっています！

該当のソースコード

メモhtml

<%= render 'shared/second_header' %>
<div class="memo-space">
  <div class="memo-top">
  </div>
  <div class="memo-all">
    <div class="title-left" id="title-block">
      <% @memos.reverse_each do |memo| %>
        <div class="title-frame">
          <input id="memo-check-<%=memo.id%>" class="memo-check" type="checkbox">
          <label class="memo-label", for="memo-check-<%=memo.id%>"><%= memo.title%></label>
        
        <div class="memo-content">
          <p><%= memo.content%></p>
        </div>
        </div>
      <% end %>
    </div>

メモCSS

.memo-all {
  display: flex;
  justify-content: space-between;
  text-align: center;
  height: 400px;
}

.memo-top {
  height: 10vh;
}

.title-left{
  border: 1px solid red;
  width: 70%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* overflow: scroll; */
}
.title-frame {
  width: 50vw;
  height: 100%;
  border: 1px solid #000000;
  padding: 5px auto;
  margin: 10px 10px 0 25px;
}
/* aaaa */
.memo-check{
  display: none;
}
.memo-label {
  background: #333;
  color: #fff;
  display: block;
  margin-bottom: 1px;
  padding: 20px;
}
.memo-content{
  border: 1px solid #333;
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: .5s;
  visibility: hidden;
}
.memo-check:checked + .memo-label + .memo-content {
  height: 100%;
  opacity: 1;
  padding: 10px;
  visibility: visible;
}

ヘッダー

<header class="header-second"> の部分のCSS

* {
  box-sizing: border-box;
}

.header-second {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  height: 100px;
  background-color: #444444;
}

試したこと

htmlの<div class="title-frame">
部分を<p>に変えてみたが変わらなかったです。
他、cssの記述を変えて.title-left部分のheightを％,vh,pxにすると表示は
若干変わるのですが、投稿表示を <div class="title-left" id="title-block"></div>内に納めたいので、解決には至らなかった。

補足情報（FW/ツールのバージョンなど）

初心者です。

わかりづらい部分があったら申し訳ありません。
追記致しますのでどうかアドバイスお願いいたします。
ここにより詳細な情報を記載してください。

m.ts10806

2020/11/07 21:17

> 補足情報（FW/ツールのバージョンなど）挨拶ではなく（）内にあるように言語やフレームワークや利用しているツールなどのバージョンを記載してください（「初心者です」などは初心者アイコンつけられているので不要です）

m.ts10806

2020/11/07 21:18

あと　second_header　のコードも提示してください。

hatena19

2020/11/08 02:52

実行後にブラウザに表示されているHTMLコードを提示してもらえませんか。検証ツールで右クリックしてCopy - Copy element でコピーして質問に貼り付けてください。

hana_123

2020/11/08 09:56

解決いたしましたが、貴重なご指摘ありがとうございます！今後の質問は修正していきたいと思います。今後ともよろしくお願いします！

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

回答1件

ベストアンサー

HTMLが未提示ですので、推測ですが、たぶん
親要素の.title-left に display: flex; を設定しているのが原因でしょう。
Flexboxは親要素内に収まるように高さを調整しますので。
縦にならべるならFlexboxは不要です。

css
1.title-left{
2  border: 1px solid red;
3  width: 70%;
4  height: 400px;
5/* 以下削除  
6  display: flex; 
7  justify-content: center;
8  align-items: center;
9  flex-direction: column; 
10ここまで */
11  overflow: auto; /* 修正 */
12}
13.title-frame {
14  width: 50vw;
15  height: auto; /* 100% → auto に修正 */
16  border: 1px solid #000000;
17  padding: 5px auto;
18  margin: 10px 10px 0 25px;
19}