複数のdiv要素を縦に並べたときに最後のheightが0なのに残ってしまう

下記のようなコードでfunction_content_headerをheight0にしておいて、クリックなどのアクションによりcontent_each_wrapper_showクラスをつけて、高さをつけてあげるアコーディオンのような動きをheightを変化させることで実装しようと思っています。
まだ、JSで動作をつける前なのですが、以下のように最初の子要素だけheight:100%のはずなのに、最後の要素もcss上高さを持ってしまっており、表示されてしまいます。

原因と解決方法について、アドバイスを願えますでしょうか？
よろしくお願い申し上げます。

JSFiddldle

html
1            <div class="function_content_wrapper">
2              <div class="function_text_content content_each_wrapper content_each_wrapper_show">
3                <div class="text function_content_header">テキスト機能</div>
4              </div>
5              <div class="function_index_content content_each_wrapper">
6                <div class="index function_content_header">目次機能</div>
7              </div>
8              <div class="function_note_content content_each_wrapper">
9                <div class="note function_content_header">ノート機能</div>
10              </div>
11              <div class="function_refer_content content_each_wrapper">
12                <div class="refer function_content_header">検索機能</div>
13              </div>
14              <div class="function_qa_content content_each_wrapper">
15                <div class="qa function_content_header">QA機能</div>
16              </div>
17              <div class="function_exercise_content content_each_wrapper">
18                <div class="exercise function_content_header">問題機能</div>
19              </div>
20              <div class="function_answer_content content_each_wrapper">
21                <div class="answer function_content_header">回答機能</div>
22              </div>
23              <div class="function_conti_content content_each_wrapper">
24                <div class="conti function_content_header">その他機能</div>
25              </div>
26            </div>

css
1.text{background:#777777;opacity:0.8}
2.index{background:#87e3ef;opacity:0.8}
3.note{background:#ef8787;opacity:0.8}
4.refer{background:#87efa5;opacity:0.8}
5.qa{background:#efdb87;opacity:0.8}
6.exercise{background:#e597f9;opacity:0.8}
7.answer{background:#7081f1;opacity:0.8}
8.function{background:#63ad2e;opacity:0.8}
9.conti{background:#efad87;opacity:0.8}
10.function_content_wrapper{
11  margin-top: 15px;
12  width:100%;
13}
14.function_content_header{
15  padding:5px 5px;
16  color:white;
17  opacity:0.9;
18}
19.content_each_wrapper{
20  height: 0px;
21  transition: height .2s ease-in;
22}
23.content_each_wrapper_show{
24  height: 100%;
25}
26コード

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

回答1件

ベストアンサー

高さ0になっていて、内容物がはみ出ていると思います。
overflow:hiddenとしてはいかがですか？

css
1.content_each_wrapper {
2	height: 0px;
3	transition: height .2s ease-in;
4	overflow: hidden;
5}

投稿2021/07/21 07:39

Lhankor_Mhy

総合スコア36149

pegy

2021/07/21 07:42

なるほど、内容物がある場合にはheightは０ではなく表示されるということなんですね。とすると、最後の要素以外はoverflow:hiddenを設定していないのに表示されない違いはどこにあるのでしょうか？重ねて失礼いたします。

Lhankor_Mhy

2021/07/21 07:48 編集

最後の <div class="function_answer_content content_each_wrapper"> を削除してみるとわかりやすいのでは。

Lhankor_Mhy

2021/07/21 07:47

開発者ツールの使い方を覚えると、この手の検証が楽になると思いますよ。

pegy

2021/07/21 09:08

有難うございます。実は確認済みでその次に最後の要素が表示されるため挙動が不思議でした。。

pegy

2021/07/21 09:12

導かれる解は他の要素の高さの妨げにあう場合にははみ出している内容はその他の要素に劣後して表示されないと解釈したのですが、如何でしょうか？

Lhankor_Mhy

2021/07/21 09:16 編集

重なって表示されているものはHTMLでの出現順に従う、ということですね。オーバーフローは関係ないです。ネガティブマージンでも同じ原則が働くはずです。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

pegy

2021/07/21 09:51

有難うございます。docsを一通り拝見させて頂きました。唯一明らかにならなかった、点があるのですが高さがないブロック要素で内容がはみ出している状態は、重なって表示されているという前提で理解して良いのでしょうか？重ねて申し訳ございませんが、宜しくお願い申し上げます。

Lhankor_Mhy

2021/07/21 12:53

おっしゃる通りです。 height: 0px; を 10px ぐらいにするとわかるのではないでしょうか。

pegy

2021/07/22 14:17

指定してみたら直感的にも理解することができました。大変勉強になりました、ありがとうございます！

Lhankor_Mhy

2021/07/23 11:40

お役に立てたようで何よりです。