display: flex;に関して

追記### overflowできるページの２分割
お手数おかけしますが、まずこちらのコードペンのURLを確認していただきたいです。
右側にclient messagesという部分があると思うのですが、こちらを２分割にして使用したいと考えております。
通常であれば親要素にdisplay: flex;を適用すればいいと思うのですが、うまくいきませんでした。
scssが関係しているのかどうかわからないのですが、わかる方ご回答いただければ幸いです。

該当コード

以下に該当コード（client messagesの部分）を切り取ってみます。

HTML
1<div class="messages-section ">
2                <div class="projects-section-header ">
3                    <p>Client Messages</p>
4                </div>
5                <div class="messages ">
6                    <div class="message-box ">
7                        
8                        <div class="message-content ">
9                            <div class="message-header ">
10                                <div class="name ">Stephanie</div>
11                            </div>
12                            <p class="message-line ">
13                                I got your first assignment. It was quite good. ???? We can continue with the next assignment.
14                            </p>
15                            <p class="message-line time ">
16                                Dec, 12
17                            </p>
18                        </div>
19                    </div>
20　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
21        </div>

SCSS
1@media screen and (max-width: 880px) {
2    .messages-section {
3        transform: translateX(100%);
4        position: absolute;
5        opacity: 0;
6        top: 0;
7        z-index: 2;
8        height: 100%;
9        width: 100%;
10        display: flex;　　　　　　　←自分で追加してみましたがダメでした。
11        .messages-close {
12            display: block;
13        }
14    }
15    .messages-btn {
16        display: flex;
17    }
18}
19
20@media screen and (max-width: 720px) {
21    .app-name,
22    .profile-btn span {
23        display: none;
24    }
25    .add-btn,
26    .notification-btn,
27    .mode-switch {
28        width: 20px;
29        height: 20px;
30        svg {
31            width: 16px;
32            height: 16px;
33        }
34    }
35    .app-header-right button {
36        margin-left: 4px;
37    }
38}
39
40@media screen and (max-width: 520px) {
41    .projects-section {
42        overflow: auto;
43    }
44    .project-boxes {
45        overflow-y: visible;
46    }
47    .app-sidebar,
48    .app-icon {
49        display: none;
50    }
51    .app-content {
52        padding: 16px 12px 24px 12px;
53    }
54    .status-number,
55    .status-type {
56        font-size: 10px;
57    }
58    .view-btn {
59        width: 24px;
60        height: 24px;
61    }
62    .app-header {
63        padding: 16px 10px;
64    }
65    .search-input {
66        max-width: 120px;
67    }
68    .project-boxes.jsGridView .project-box-wrapper {
69        width: 100%;
70    }
71    .projects-section {
72        padding: 24px 16px 0 16px;
73    }
74    .profile-btn img {
75        width: 24px;
76        height: 24px;
77    }
78    .app-header {
79        padding: 10px;
80    }
81    .projects-section-header p,
82    .projects-section-header .time {
83        font-size: 18px;
84    }
85    .status-type {
86        padding-right: 4px;
87        &:after {
88            display: none;
89        }
90    }
91    .search-input {
92        font-size: 14px;
93    }
94    .messages-btn {
95        top: 48px;
96    }
97    .box-content-header {
98        font-size: 12px;
99        line-height: 16px;
100    }
101    .box-content-subheader {
102        font-size: 12px;
103        line-height: 16px;
104    }
105    .project-boxes.jsListView .project-box-header>span {
106        font-size: 10px;
107    }
108    .box-progress-header {
109        font-size: 12px;
110    }
111    .box-progress-percentage {
112        font-size: 10px;
113    }
114    .days-left {
115        font-size: 8px;
116        padding: 6px 6px;
117        text-align: center;
118    }
119    .project-boxes.jsListView .project-box>* {
120        margin-right: 10px;
121    }
122    .project-boxes.jsListView .more-wrapper {
123        right: 2px;
124        top: 10px;
125    }
126}

追記

解決できると考えたコードに関してですが、文字数の問題もあり、サンプルコードを参考にしていただきたいです。
上述した通り（わかりにくくてすみません）

<div class="message-box">の中に <div class="projects-section-header">で囲まれた部分を入れ子にして２回分入れてます。イメージとして下にサンプルコードを書きます。

sample
1<div class="wrapper">
2        <div class="column cat1">  //ここが<div class="projects-section-header">以降の１回目に相当
3            <div class="info">
4                <h2>アラン</h2>
5                <p>(ローラン)</p>
6                <a href="#">プロフィール</a>
7            </div>
8        </div>
9        <div class="column cat2">　　//ここが<div class="projects-section-header">以降の2回目に相当
10            <div class="info">
11                <h2>アステア</h2>
12                <p>(ラダトーム)</p>
13                <a href="#">プロフィール</a>
14            </div>
15        </div>
16    </div>

サンプルコードでは.wrapperにdisplay: flex;で**”横並び”**になるはずですよね？
私が２分割と言っているのは、Divを横並びにするということです。

codepenでの２分割とは、今ある現状のmessages部分を１列と考えるならば倍にして２列にし、横並びにしたいということです。

Lhankor_Mhy

2021/10/06 09:03

「解決すると思った」コードをご提示ください。

itagagaki

2021/10/06 09:10

> 右側にclient messagesという部分があると思うのですが、こちらを２分割にして使用したい日本語の意味がわからないので、わかるように詳細に書いてください。「こちら」とは具体的にコード上のどれのことか「分割」とはどういう意味か「使用」とはどういう意味か

tomomomo

2021/10/06 23:19

お二方ありがとうございます。追記しました。コードの件については申し訳ありません。追記で伝わらないようであれば、自分で可決するかもう一度投稿し直してみます。

Lhankor_Mhy

2021/10/07 00:40 編集

「ここが<div class="projects-section-header">以降の１回目に相当」とのことですが、実際のコードは .projects-section-header の兄弟要素として .messages があると思いますが、この取り扱いはどうなりますか？一番想定と近いものはどれですか？ 1. .projects-section-header + .messages + .projects-section-header + .messages となる（横に4分割） 2. .projects-section-header + .projects-section-header となる（.messagesは無視してよい） 3. ( .projects-section-header > .messages ) *2 となる（元コードとHTML構造を変えて親子関係にする） 4. ( .wrapper > .projects-section-header + .messages ) *2 となる（ラッパー要素を用意する）

Lhankor_Mhy

2021/10/07 00:41

また、「うまくいきませんでした」とのことですが、具体的には何が起きていますか？「質問のヒント」のこちらの項目が役に立つかもしれませんのでご一読ください。結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1

tomomomo

2021/10/07 01:10 編集

うまくいかないに関して、最後に画像を添付しました。一応二つに分けるとはこのようなことです。今回の対応では、<div class="messages-section ">を単純に２回記述しています。この画像の形で一応成功なので、あとはスクロールを対応させることと幅を小さくして二つをくっ付ければ良いかと考えております。実際に起きたこととして画像を見てもらってわかりますでしょうか。３番が理想かと思われます。

Lhankor_Mhy

2021/10/07 01:17 編集

すみません、「想定と近いもの」と書いてしまったのがよくなかったです。一番現状のうまくいかないコードと近いものは2番でいいですか？

tomomomo

2021/10/07 01:21

その認識であっています。実装したいことで言えば、上述した問題を除けば画像の通りです。

Lhankor_Mhy

2021/10/07 01:24

ご提示のような感じで試してみましたが、横並びに2分割されました。

Lhankor_Mhy

2021/10/07 01:26

あれ？　スクリーンショットは「うまくいかない」結果ですよね？

Lhankor_Mhy

2021/10/07 01:29

「うまくいかないに関して、最後に画像を添付」と「実装したいことで言えば、上述した問題を除けば画像の通り」とどちらが正しいですか？

tomomomo

2021/10/07 01:29

すみません、うまく伝えられなくて。。。うまくいかない結果ではあるのですが、２分割という意味では成功しているということでした。２分割されたのは画像の感じではなくできたということですよね。ご提示とはどのことでしょう？

Lhankor_Mhy

2021/10/07 01:30

ああ、「上述した問題を除けば」ということは、問題がある結果、ということですか。失礼いたしました。

tomomomo

2021/10/07 01:37

いえ、こちらこそわかりづらくてすみません。

Lhankor_Mhy

2021/10/07 01:41

「ご提示」とはいろいろ書いていただいた条件、ということです。具体的なコードが提示されていませんので、こちらも推測したコードで確認するしかないもので。 --- > うまくいかない結果ではあるのですが、２分割という意味では成功しているそうなんですね。私は「上述した問題」とは「2分割が上手くいかない」ということかと読んでいましたが、違うのですね。そうすると起きている問題は何なのでしょうか？今の気分はこんな感じです。 https://twitter.com/lhankor_mhy/status/1169432868705075200

tomomomo

2021/10/07 02:02

本当に申し訳ありません。最後の皮肉に関しては、頭が悪くてよくわかりませんが私が思っていることなどあっても伝えられていないので答えようもないということですかね。。。どう伝えていいかわかりませんが、元々の目標はmessagesの部分のボックスを１列と考えると、２列にしてあげるということでした。画像では無理矢理１列のものをもう一列追加して２列にした感じですが、実装したかったのは元の１列を分けて２列にするということでした。本当にうまく伝えられませんが、写真では 1 + 1 = 2 実装したいものは 1/2 + 1/2 = 1 というイメージです。。。質問の仕方が本当にダメだったと感じております。ご迷惑おかけいたしました。

Lhankor_Mhy

2021/10/07 02:07

そうではなくて、私が言いたいのは具体的なコードが示されないのであれば、具体的な回答がつかず、ふわっとした応答しか得られないのは当然ではないか、という話です。「質問するときのヒント」にもあります。ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1

Lhankor_Mhy

2021/10/07 02:08

「現象を再現するためのミニマムなプログラム」をどうやって作るかですが、たとえば、以下の様な手順はどうですか？ ①　HTMLからフッターを削除してみて、それでも問題が再現するかどうか確認する。 ②　①で問題が再現しないのであればフッターに原因がある可能性があるので、フッター以外を削除してみる。以下、①に戻って別の部分を削除するを繰り返す。 ③　①で問題が再現するのであればフッターは関係ないので「現象を再現するための、より小さいプログラム」ができたことになる。以下、①に戻って別の部分を削除するを繰り返す。

Lhankor_Mhy

2021/10/07 02:24

当方で試したコードは以下のとおりです。 https://jsfiddle.net/Lhankor_Mhy/rkvc1a5b/ 「Client Messages」が2列横並びになっていることが確認できると思います。

tomomomo

2021/10/07 06:50

おっしゃる通りです。コードの記載はしておりましたが、うまくいかない場合のコードは記載しておりませんでした。文字数に制限があったため記載できませんでしたが、相手を考えるとそれが正しくはなかったです。ミニマムなプログラムに関して、ご教示いただきありがとうございます。全体で見てしかいなかったので、細分化して試すということを疎かにしておりました。試していただいたコードが理想のものでした。そこに.messagesを含めてあげればうまくいきそうです。通常であればスルーして無視される質問に、ご丁寧に対応していただきとても感謝しています。今後の質問の際には伝えることを肝に銘じておきます。

Lhankor_Mhy

2021/10/07 08:58

こちらこそ、不躾な物言いで大変失礼いたしました。