flexboxで子要素のみ横並びにし、中の孫要素は横並びにしない方法。

Question

flexboxで子要素のみ横並びにし、中の孫要素は横並びにしない方法。

WordPressでHPを作成しており、flexboxで要素を横並びにしようとしております。
ただ横並びにさせたい要素"profile"の中に含まれている孫要素の「担当カラー」や「赤」まで横並びになってしまいます。
"profile"のみ横並にし、中の要素には触れない方法はありますでしょうか？

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

エラーメッセージ

該当のソースコード

<div class="wp-block-group alignwide member-container">
　<div class="wp-block-group__inner-container">
　　<div class="wp-block-group profile">
　　　<div class="wp-block-group__inner-container">
　　　　<div class="画像">
　　　　<p class="has-text-align-center profile_name member01">
　　　　　<strong><span class="fz-22px">名前</span></strong><br>
　　　　　<span class="fz-16px">フリガナ</span>
　　　　</p>
　　　　<a href="#" class="profile_btn member01">
　　　　twitter
 　　　 <img src="https://memorize-idol.net/wp-content/uploads/2020/10/ダウンロード.png" alt="">
　　　　</a>
　　　　<p class="has-text-align-left profile_title member01">◆担当カラー</p>
　　　　<p class="profile_val">　赤</p>

```CSS
.wp-block-group__inner-container{
display:flex;
flex-wrap:wrap;
}
.profile{
  margin:10px 10px 30px;
  width: 45%;
  padding: 0;
  box-shadow: 0px 0px 10px rgb(0, 0, 0, 0.4);
  border-radius: 10px;
}
.profile_btn {
    display: inline-block;
    width: calc(100% - 10px);
    position: relative;
    padding: 10px 0;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    margin: 5px;
    border-radius: 20px;
    color: #fff;
}
.profile_name.member01 {
    color: #ff3243;
}
.profile_btn.member01 {
    background: #ff3243;
}
.profile_title.member01 {
    color: #ff3243;
}

### 試したこと



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

ここにより詳細な情報を記載してください。

Answer 1

html構造がおかしいですがこの後すぐDIVが閉じるという前提で回答します。
wp-block-group__inner-containerにクラス指定をしていますが、これは2か所で使われています。
そのためprofileだけではなく孫要素もflexが適用されています。

WordpressのGutenbergを使用しているようなので、グループ設定時に右側の項目にある追加CSSクラスでクラスを追加してそのクラスにfelx指定をしてください。

Comments

[memora]

ご回答ありがとうございます。
またソースが不足しており、申し訳ありませんでした。

profileは複数あるのですが、それらをまとめてグループ化した追加CSSクラスに” member-container “ というクラスを追加しています。
ただ、この” member-container “にflexを指定しても横並びになりませんでした。
” member-container “の設定箇所が悪いのでしょうか？

[gogoweb_ikeda]

member-containerにflexを適用してもその下の

<div class="wp-block-group__inner-container">
</div>

部分が横並びになるだけなので、この部分にflexを指定するか、
.member-container > .wp-block-group__inner-container{
display:flex;
flex-wrap:wrap;
}
に変更してください。

[memora]

ありがとうございます。
希望の形にすることが出来ました。