flexbox にて要素の高さを揃えない方法

###問題点・解決したいこと
flexbox で要素の高さを揃えない様にしたいです。
画像の様に、緑色の要素があるかと思いますが、jQueryでtoggle機能を付与しているのですが、
緑色の要素を押すと、その下にいくつかボックスが現れます。

その時に緑色の横の要素（例えば、ボックスタイトル1の横の要素はボックスタイトル2）とその下（ボックスタイトル4）との高さ間の大きさが大きくなってしまいます。

実現したいこととしては、緑色の要素を押すと、右側の要素間（ボックスタイトル2と4）の大きさはそのままでいてほしいです。

###現状の状態
toggle前の状態

toggle後の状態

###コード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="index.css">
7    <title>Document</title>
8</head>
9<body>
10  <div class="container">
11    <div class="boxes">
12      <div class="content">
13        <div class="title">
14          <div class="txt">
15            <p>ボックスタイトル1</p>
16          </div>
17        </div>
18        <div class="test_block">
19          <div class="test_container">
20            <div class="test">
21              <p>test1</p>
22            </div>
23            <div class="test">
24              <p>test2</p>
25            </div>
26            <div class="test">
27              <p>test3</p>
28            </div>
29            <div class="test">
30              <p>test4</p>
31            </div>
32          </div>
33        </div>
34      </div>
35      <div class="content">
36        <div class="title">
37          <div class="txt">
38            <p>ボックスタイトル2</p>
39          </div>
40        </div>
41        <div class="test_block">
42          <div class="test_container">
43            <div class="test">
44              <p>test1</p>
45            </div>
46            <div class="test">
47              <p>test2</p>
48            </div>
49            <div class="test">
50              <p>test3</p>
51            </div>
52            <div class="test">
53              <p>test4</p>
54            </div>
55          </div>
56        </div>
57      </div>
58      <div class="content">
59        <div class="title">
60          <div class="txt">
61            <p>ボックスタイトル3</p>
62          </div>
63        </div>
64        <div class="test_block">
65          <div class="test_container">
66            <div class="test">
67              <p>test1</p>
68            </div>
69            <div class="test">
70              <p>test2</p>
71            </div>
72            <div class="test">
73              <p>test3</p>
74            </div>
75            <div class="test">
76              <p>test4</p>
77            </div>
78          </div>
79        </div>
80      </div>
81      <div class="content">
82        <div class="title">
83          <div class="txt">
84            <p>ボックスタイトル4</p>
85          </div>
86        </div>
87        <div class="test_block">
88          <div class="test_container">
89            <div class="test">
90              <p>test1</p>
91            </div>
92            <div class="test">
93              <p>test2</p>
94            </div>
95            <div class="test">
96              <p>test3</p>
97            </div>
98            <div class="test">
99              <p>test4</p>
100            </div>
101          </div>
102        </div>
103      </div>
104    </div>
105  </div>
106  <script
107    src="https://code.jquery.com/jquery-1.12.4.min.js"
108    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
109    crossorigin="anonymous"></script>
110  <script>
111    $(function(){
112      $(".title").on("click", function() {
113        $(this).next().slideToggle();
114      });
115    });
116  </script>
117</body>
118
119</html>

css
1* {
2  box-sizing: border-box;
3}
4.container {
5  background-color: rgb(182, 210, 253);
6  height: 100vh;
7}
8.container .boxes {
9  width: 900px;
10  margin: 0 auto;
11  padding: 3rem 0;
12  display: flex;
13  flex-wrap: wrap;
14  justify-content: space-between;
15  align-items: flex-start
16}
17
18.container .boxes .content {
19  width: 40%;
20  background-color: rgb(187, 247, 172);
21  margin-bottom: 1rem;
22}
23.container .boxes .content .title{
24  cursor: pointer;
25  padding: 0.43rem 1rem 0.43rem 0.5rem;
26  padding-bottom: 0.43rem;
27  border-bottom: 1px solid #383838;
28}
29.container .boxes .content .test_block {
30  display: none;
31}
32.container .boxes .content .test_block .test_container{
33  display: flex;
34  flex-direction: row;
35  flex-wrap: wrap;
36  background-color: #FDFDFD;
37  border-bottom: 1px solid #e7e7e7;
38}
39.container .boxes .content .test_block .test_container .test{
40  width: 50%;
41  padding: 13px 18px 13px 16px;
42  border-top: 1px solid #e7e7e7;
43  border-left: 1px solid #e7e7e7;
44}

###やってみたこと
左列の緑色の要素（ボックスタイトル1と3）をくくる要素を付加（例えば、left-container）し、
右列の緑色の要素（ボックスタイトル2と4）をくくる要素を付加（例えば、right-container）して
実装すれば、実現することができますが、仕様の関係上、各列をくくる要素を付加せずにしなければなりません。

###付与
jQueryを使ってstyleにbreak-before: column;と書く様にしました。
その場合、リロードして、
最初にボックスタイトル2をタップすると、画像①のようになり、
最初はボックスタイトル4や3をタップした後にボックスタイトル2を押すと画像②のようにうまく行きます。
なぜなんでしょうか。

画像①

画像②

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

回答2件

ベストアンサー

段組みレイアウトを使えばできないことはないです。

段組みレイアウトの使用 - CSS: カスケーディングスタイルシート | MDN

css
1.container .boxes {
2  width: 900px;
3  margin: 0 auto;
4  padding: 3rem 0;
5  columns: 2;
6  column-fill: auto;
7}
8.container .boxes .content:nth-child(3) {
9  break-before: column;  
10}
11
12.container .boxes .content {
13  width: 80%;
14  background-color: rgb(187, 247, 172);
15  margin-bottom: 1rem;
16}

CodePenサンプル

ただし、並び順が下記のように変わります。

ボックス1　ボックス3
ボックス2　ボックス4

投稿2021/01/08 04:52

編集2021/01/08 04:53

hatena19

総合スコア33790

tomato185

2021/01/08 05:21

hatena19さん、ありがとうございました！期待した動作が確認できました！ありがとうございます！！

tomato185

2021/01/08 07:47

質問です。例えば、 .container .boxes .content:nth-child(3) { break-before: column; } これをcssに書かずに、jQueryで $('.boxes .content:nth-child(3)').css('break-before','column'); で直接styleにbreak-before:columnを入れてみたんですがうまく行きませんでした。なぜstyleに書いた場合とcssに書いた場合で異なる動きがみられるのでしょうか。

Lhankor_Mhy

2021/01/08 07:56

ブラウザ対応が結構厳しめですね…… https://caniuse.com/mdn-css_properties_break-before_multicol_context_column

tomato185

2021/01/08 08:10

classに書いた場合でもjQueryに書いた場合でもうまくいかなかったらわかるんですが、 .container .boxes .content:nth-child(3) { break-before: column; } この書き方だけはうまくいくんですよね、、、

tomato185

2021/01/08 08:11

例えば、jQueryでクラス（wrapクラスとする）を追加して、 wrap { break-before: column; } でも成功しないです。

hatena19

2021/01/09 09:31

実際に試してないですが、 jQuery で、親要素の columns: 2; を削除してから、.content:nth-child(3) に break-before: column; を追加して、その後、親要素に columns: 2; を追加したらどうなりますか。

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

contentに色を付けずにcontentのtitileに色をつければいいのでは？

CSS
1.container .boxes .content {
2  width: 40%;
3  margin-bottom: 1rem;
4}
5.container .boxes .content .title{
6  background-color: rgb(187, 247, 172);
7}