レスポンシブ時に複数条件（等幅、可変）を同時に用いてボタンサイズを変更したい

実現したいこと

・レスポンシブ時にcontents_chapter_title pのテキストが１〜２行の場合：ウィンドウサイズ820px以上の時はcontents_chapterのheightは110px、ウィンドウサイズ820px以下の時はcontents_chapterのheightは70pxにする
・レスポンシブ時にcontents_chapter_title pのテキストが3行以上折り返す場合：contents_chapterのheightをautoにする、.contents_chapter_title pの上下のmargin15pxを保持したままcontents_chapterのheightが可変するようにする

前提

上記が実現可能であれば追加・修正コードを教えていただけると助かります。
「持続可能なライフスタイルについて」（contents_title）をクリックするとアコーディオンメニューが開き、その中にさらにアコーディオンメニューが入っているという2重構造になっております。
JavaScriptを使用し、アコーディオンメニューをクリックして展開する時、中身の要素のheightに合わせて外側のメニューボタンの高さも可変するよう設定しています。
また、展開している状態で再度クリックしてアコーディオンメニューを閉じると、autoから元の高さ（110px / 70px）に戻ります。

発生している問題・エラーメッセージ

・レスポンシブ時にcontents_chapter_title pのテキストが3行以上折り返す場合、contents_chapter_title pからはみ出してしまい、.contents_chapter_title pの上下のmargin15pxの部分にまで侵入してきてしまう、4行以降はcontents_chapterのheightも超えてしまう

該当のソースコード

※文字数制限のため、htmlは自己解決欄（解決していませんが）に貼ってあります。

css
1@charset "utf-8";
2
3html {
4    visibility: hidden;
5}
6
7html.wf-active {
8    visibility: visible;
9}
10
11.background_image {
12    padding:5%;
13    }
14
15.background_image::before {
16    content: "";
17    display: block;
18    position: fixed;
19    top: 0;
20    left: 0;
21    z-index: -1;
22    width: 100%;
23    height: 100vh;
24    background-position: 50% 100%;
25    background-image:url('images/bg.svg');
26    opacity: 1
27}
28
29.container {
30    margin: 100px auto;
31    height: auto;
32    width: 1200px;/*62.5%*/
33}
34
35.container ul {
36    list-style: none;
37    padding-left: 0;
38}
39
40.container_contents_list {
41    margin-bottom: 30px;
42}
43
44.contents {
45    width: 100%;
46    height: 120px;
47    background: #fff;
48    border: 3px solid #F5DCA5;
49    border-radius: 20px;
50    box-shadow: 0px 5px 0px #F5DCA5;
51}
52
53.contents_title {
54    height: 50px;
55    padding: 35px 0;
56    display: flex;
57    cursor: pointer;
58}
59
60.title_text {
61    margin: auto 40px;
62    width: 100%;
63    height: 100%;
64    line-height: 100%;
65    font-size: 100%;
66    font-weight: 700;
67}
68
69.open_button {
70    width: 20px;
71    height: 20px;
72    margin: auto 30px auto 0;
73}
74
75/******  第2階層  ******/
76
77.contents_chapter_container {
78    display: none;
79    margin: 0 125px 20px 125px;
80    height: auto;
81}
82
83.contents_chapter_container.active {
84    display: block; 
85}
86
87.contents_chapter {
88    width: 100%;/*950px*/
89    height: 110px;/*110px*//**/
90    border-radius: 20px;
91    margin-bottom: 30px;
92    background-color: #E1EBA0;
93}
94
95.contents_chapter_title {
96    height: 110px;/*110px*//**/
97    display: flex;
98    cursor: pointer;
99}
100
101.contents_chapter_title p {
102    margin: 15px;/**/
103    width: 100%;
104    height: auto;
105    line-height: 38px;/*23px*/
106    text-align: left;
107    display: flex;
108    flex-direction: column;
109    justify-content: center;
110    color: #1E1E1E;
111    font-size: 1.4em;/*23px*/
112    /*font-weight: 600;
113    font-family: "Rounded M+ 1c", sans-serif;*/
114    /*font-family: "M PLUS Rounded 1c", sans-serif;*/
115    font-family: "m-plus-rounded-1c", sans-serif;
116    font-weight: 700;
117    font-style: normal;
118}
119
120.contents_chapter_caption {
121    display: none;
122    height: 100%;
123    margin: 0 5px;/**/
124    padding: 32px 0;
125    background-color: #fff;
126    border-radius: 0 0 18px 18px;
127}
128
129.contents_chapter_caption p {
130    height: 100%;
131    margin: 0 35px;
132    color: #323232;
133    font-size: 1.3em;/*20px*/
134    font-family: "m-plus-rounded-1c", sans-serif;
135    font-weight: 400;
136    font-style: normal;
137    line-height: 38px;
138}
139
140.contents_chapter_caption img {
141    width: 70%;
142    margin: auto;
143    display: block;
144}
145
146.open_button_chapter {
147    width: 20px;
148    height: 20px;
149    margin: auto 30px auto 0;
150}
151
152/*----------ウィンドウサイズが1350ピクセル以下の場合----------*/
153
154@media screen and (max-width : 1350px) {
155    .container {
156        width: 100%;/*1200px;*/
157    }
158}
159
160/*----------ウィンドウサイズが1000ピクセル以下の場合----------*/
161
162@media screen and (max-width : 1000px) {
163    .contents_chapter_container {
164        margin: 0 40px 20px 65px;/*0 125px 20px 125px;*/
165    }
166}
167
168/*----------ウィンドウサイズが820ピクセル以下の場合----------*/
169
170@media screen and (max-width : 820px) {    
171    .container {
172        margin: 50px auto;
173    }
174
175    .container_contents_list {
176        margin-bottom: 20px;/*30px*/
177    }
178
179    .contents {
180        height: 60px;/*120;*/
181        border-radius: 10px;
182        box-shadow: 0px 3px 0px #F5DCA5;
183    }
184
185    .contents_title {
186        height: 30px;/*50px;*/
187        padding: 15px 0;/*40px 0;*/
188    }
189    
190    .title_text {
191        margin: auto 20px;/*auto 40px;*/
192        line-height: 0;
193    }
194
195    .open_button {
196        width: 15px;/*20px;*/
197        height: 15px;/*20px;*/
198        margin: auto 20px auto 0;/*auto 30px auto 0;*/
199    }
200
201    /******  第2階層  ******/
202    .contents_chapter_container {
203        margin: 0 10px 20px 22px;/*0 40px 20px 65px;/*0 125px 20px 125px;*/
204    }
205
206    .contents_chapter {
207        height: 70px;/*110px**//**/
208        border-radius: 10px;/*20px;*/
209        margin-bottom: 20px;/*30px;*/
210    }
211
212    .contents_chapter_title {
213        height: 70px;/*110px*//**/
214    }
215
216    .contents_chapter_title p {
217        margin: 10px;/*15px;*//**/
218        line-height: 24px;/*38px*/
219        font-size: 0.8em;/*13px*//*1.4em;*//*23px*/
220    }
221    
222    .contents_chapter_caption {
223        padding: 12px 0;/*22px 0;*//*32px 0;*/
224        border-radius: 0 0 8px 8px ;/*0 0 18px 18px ;*/
225    }
226    
227    .contents_chapter_caption p {
228        margin: 0 15px;/*0 25px;*//*0 35px;*/
229        font-size: 0.8em;/*12px*//*1.3em;*//*20px;*/
230        line-height: 28px;/*38px;*/
231    }
232    
233    .open_button_chapter {
234        width: 15px;/*20px;*/
235        height: 15px;/*20px;*/
236        margin: auto 15px auto 0;/*auto 30px auto 0;*/
237    }
238
239}

試したこと

・contents_chapterのheightをautoにし、contents_chapter_title pのテキストの量によって.contents_chapter_title pの上下のmargin15pxを保持したままcontents_chapterのheightを可変させることはできたが、レスポンシブ時にcontents_chapter_title pのテキストが１〜２行の場合でも作用されてしまうため断念

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

画像部分は見えていないと思いますが、実際は＋ボタン（icon_plus.svg）と-ボタン（icon_minus.svg）がクリックで切り替わるよう設置しております。

Lhankor_Mhy

2023/11/30 02:13

contents_chapter_title や contents_chapter というのは、ご提示のHTMLで言うと具体的にはどれのことですか？　ひとつめの.button が contents_chapter_title でしょうか？

foodtheater

2023/11/30 04:30 編集

すいません、誤ったhtmlを貼っていました。質問のほうを修正しようと思ったのですが、文字数制限をオーバーしていたため、自己解決欄に（解決していませんが）htmlを貼りました。

foodtheater

2023/11/30 04:40

Lhankor_Mhyさんのご質問への回答を以下に記します。 contennts：一つ目のアコーディオンメニューのボタン contennts_title：上記のボタンのテキストタイトル contents_chapter：一つ目のアコーディオンメニューのボタンをクリックして展開した中にあるアコーディオンメニューのボタン contents_chapter_title：上記のボタンのテキストタイトル

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

回答2件

ベストアンサー

ご希望の動作を理解できているか不安なのですが、高さの最小値を設けたいということであれば、CSSのmin-heightで対応してはどうでしょうか。

css
1.contents_chapter {
2  width: 100%;
3  /*950px*/
4  /* height: 110px; */
5  height: auto !important;
6  /*110px*/
7  /**/
8  border-radius: 20px;
9  margin-bottom: 30px;
10  background-color: #E1EBA0;
11}
12
13.contents_chapter_title {
14  /* height: 110px; */
15  min-height: 110px;
16  /*110px*/
17  /**/
18  display: flex;
19  cursor: pointer;
20}
21
22/* @media screen and (max-width : 820px) も同様 */

投稿2023/11/30 05:24

Lhankor_Mhy

総合スコア37024

foodtheater

2023/11/30 09:19

Lhankor_Mhyさんに教えて頂いた処理を試したところ、期待どおりの動きが実装できました。ありがとうございました。色々と試しているうちに、少し難しく考えてしまっていたようです。

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

本来アップしたかったhtmlです。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <!-- headの基本定義、言語設定など -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <!-- タイトル -->
8    <title>サンプル</title>
9    <!-- scripts.jsを参照する -->
10    <link rel="stylesheet" href="sample.css">
11    <script>
12      (function(d) {
13        var config = {
14          kitId: 'bdv5jgh',
15          scriptTimeout: 3000,
16          async: true
17        },
18        h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
19      })(document);
20    </script>
21  </head>
22
23  <body>
24
25    <div class="background_image">
26
27      <div class="container">
28        <ul>
29          <li class="container_contents_list">
30            <div class="contents" id="contents_1">
31              <div class="contents_title" onclick="toggleContents(this, 'iconToggle_1', 'contents_1')">
32                <div class="title_text"><p>持続可能なライフスタイルの確立について</p></div>
33                <img src="images/icon_plus.svg" alt="開く" class="open_button" id="iconToggle_1">
34              </div>
35              <ul class="contents_chapter_container">
36                <li>
37                  <div class="contents_chapter" id="contents_chapter_1">
38                    <div class="contents_chapter_title" onclick="toggleContents_Chapter(this, 'iconToggle_chapter_1', 'contents_chapter_1')">
39                      <p>3Rとはなんですか？</p>
40                      <img src="images/icon_plus.svg" alt="開く" class="open_button_chapter" id="iconToggle_chapter_1">
41                    </div>
42                    <div class="contents_chapter_caption">
43                      <p>こにテキストが入る予定です</p>
44                    </div>
45                  </div>
46                </li>
47                <li>
48                  <div class="contents_chapter" id="contents_chapter_2">
49                    <div class="contents_chapter_title" onclick="toggleContents_Chapter(this, 'iconToggle_chapter_2', 'contents_chapter_2')">
50                      <p>環境にやさしい生活を実現するために、無駄な廃棄物を減らすための工夫やポイントがありますか？</p>
51                      <img src="images/icon_plus.svg" alt="開く" class="open_button_chapter" id="iconToggle_chapter_2">
52                    </div>
53                    <div class="contents_chapter_caption">
54                      <p>ここにテキストが入る予定です</p>
55                    </div>
56                  </div>
57                </li>
58                <li>
59                  <div class="contents_chapter" id="contents_chapter_3">
60                    <div class="contents_chapter_title" onclick="toggleContents_Chapter(this, 'iconToggle_chapter_3', 'contents_chapter_3')">
61                      <p>現代社会では環境への影響や資源の有効活用が重要視されています。リサイクルの効果的な方法や工程、リサイクル施設に提供する際の注意すべきポイント、エコフレンドリーな商品の選び方などについて教えていただけますか？</p>
62                      <img src="images/icon_plus.svg" alt="開く" class="open_button_chapter" id="iconToggle_chapter_3">
63                    </div>
64                    <div class="contents_chapter_caption">
65                      <p>ここにテキストが入る予定です</p>
66                    </div>
67                  </div>
68                </li>
69              </ul>
70            </div>
71          </li>
72
73        </ul>
74      </div>
75    
76    </div>
77
78  </body>
79<script>
80  function toggleContents(element, iconId, contentsId) {
81    var icon = element.querySelector('.open_button');
82    var isOpened = icon.src.includes('icon_minus.svg');
83    var contents = document.getElementById(contentsId);
84
85    if (isOpened) {
86      icon.src = 'images/icon_plus.svg';
87      contents.style.height = 'auto'; // 高さを元に戻す
88    } else {
89      icon.src = 'images/icon_minus.svg';
90      contents.style.height = 'auto'; // 高さをautoに設定
91    }
92
93    // ここに開閉のロジックを追加する（例：アコーディオンの表示・非表示など）
94    // この例では、ul要素の表示・非表示をトグルしています
95    var sublist = element.nextElementSibling;
96    sublist.style.display = sublist.style.display === 'block' ? 'none' : 'block';
97  }
98
99  function toggleContents_Chapter(element, iconId, contentsId) {
100    var icon = element.querySelector('.open_button_chapter');
101    var isOpened = icon.src.includes('icon_minus.svg');
102    var contents_chapter = document.getElementById(contentsId);
103
104    if (isOpened) {
105      icon.src = 'images/icon_plus.svg';
106      contents_chapter.style.height = '110px'; // 高さを元に戻す
107      contents_chapter.style.paddingBottom = '0'; // padding-bottomを0に戻す
108      // ウィンドウサイズが820px以下の場合はpadding-bottomを5pxに設定
109      if (window.innerWidth <= 820) {
110        icon.src = 'images/icon_plus.svg';
111        contents_chapter.style.height = 'auto'; // 高さを元に戻す
112        contents_chapter.style.paddingBottom = '0'; // padding-bottomを0に戻す
113      }
114    } else {
115      icon.src = 'images/icon_minus.svg';
116      contents_chapter.style.height = 'auto'; // 高さをautoに設定
117      contents_chapter.style.paddingBottom = '5px'; // padding-bottomを5pxに設定
118  }
119
120    // ここに開閉のロジックを追加する（例：アコーディオンの表示・非表示など）
121    // この例では、ul要素の表示・非表示をトグルしています
122    var sublist = element.nextElementSibling;
123    sublist.style.display = sublist.style.display === 'block' ? 'none' : 'block';
124  }
125
126</script>
127
128</html>
129