2カラムのコンテンツの上に見出しを追加したいです

Question

コンテンツを2カラムにすることはできたのですが、
その2カラムの上に見出しを追加すると、3カラムになってしまいます。

おそらくボックスにシャドウを付けている【kakomi-box】のwidth: 70%が影響しているのかと思うのですが、、

添付イメージのようにしたいのですが、ご教示いただけましたら幸いです。
よろしくお願いいたします。

<div class="flexbox kakomi-box">
<h1>見出し</h1>
<section class="main">
<p>1カラム</p>
  </section>
  <section class="side">
  <p>2カラム</p>
  </section>
</div>

.kakomi-box {
 margin: 2em auto;
 padding: 1em;
 width: 70%;
font-weight: bold;
 text-align: center;
 border-radius: 10px;
 color: white;
 background-color:#2b5a93; /* 背景色 */
 box-shadow: 0 0 5px 1px #ccc; /* 影 */
}
.main {
  margin-bottom: 10px;
}
.main,
.side {
  padding: 2%;
  border-radius: 10px
}
 
/* Responsive */
@media ( min-width : 600px ){
    .flexbox {
      display: -webkit-flex;
      display: flex;
    }
  .main {
    margin: 0 10px 0 0;
  }
}

【添付イメージです↓】

ご回答、誠にありがとうございます。
追加してみたのですが、現状このような表示になっております↓

ご丁寧にご回答いただきまして本当にありがとうございます！
テキストが多いと、2カラムにはならず、2段になってしまいました。
何度も申し訳ございません。

Comments

[K_3578]

とりあえず、下記読んでください。
https://teratail.com/help/question-tips#questionTips3-1

[Lhankor_Mhy]

「見出し」とは、ご提示のHTMLでいうとどの要素ですか？
<p>2カラム</p>　のことですか？

[Lhankor_Mhy]

ああ、追加前のHTMLをご提示いただいているのかな？
追加後のHTMLをご提示いただいたほうがよさそうですね。

[Lhankor_Mhy]

ご質問の編集拝読しました。
回答させていただいたようなHTMLにすれば解決するかと思います。

[Lhankor_Mhy]

再度の編集拝読。
回答に追記します。

[kaho_0104]

ご回答いただきまして本当にありがとうございます！
現状の表示を追加させていただきました。

[Lhankor_Mhy]

3度目の編集拝読。
ご提示のコードに回答の修正を追加してサンプルを作りました。

https://jsfiddle.net/Lhankor_Mhy/nbahzw63/

当方の環境では3カラムになっていませんでした。
kaho_0104さんの環境では、上記のページも3カラムになっていますか？

[kaho_0104]

ご丁寧にありがとうございます。
Lhankor_Mhy様にいただいたコードを追加したのですが、少し長めのテキストを追加したところ2カラムにはならず、2段表示になってしまいました。何度も申し訳ございません。

Answer 1

こういうことでしょうか？

<h1>見出し</h1>
<div class="flexbox">
<section class="main">
<p>1カラム</p>
  </section>
  <section class="side">

  <p>2カラム</p>
  </section>
</div>

---

質問の変更に合わせて追記

見出しの幅を親要素に合わせて折り返せばいいかな、と思います。

以下を追加するとどうですか？

h1{
  width:100%;
}
@media ( min-width : 600px ){
    .flexbox {
      flex-wrap: wrap;
    }
}

Comments

[kaho_0104]

長いテキストを途中で改行することで、2カラムを維持することができました！
この度は、何度もやりとりしていただきありがとうございました！

[Lhankor_Mhy]

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

フレックスレイアウトでマルチカラムをする時は、少なくともひとつはカラム幅を指定することが多いように思います。
全てのカラムをリキッドにすることは少ないかもしれません。