display: flex;をメディアクエリで解除(display: block;)すると、下の要素が重なる

Question

 <div id="wrapper">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>  <!--各a,b,c,に横幅・高さ設定-->
 </div>    

 <footer></footer>

#wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 768px){
    #wrapper{
        display: block;
        width: 100%;
   }
}

初心者ですがご教授ください。

• PCではa,b,cを横並びに
• メディアクエリ適用後は縦並び　

にしたいのですが

上記コードでは縦並びにはなるものの
wrapperが高さを持たないような現象になります。
（ footerが上に重なる ）

wrapperの高さ＝子要素の高さ　にし、footerが回り込まないようにするには
どのように変更すれば良いでしょうか。

試したこと

• wrapperのheightをautoにする
• footerをdivで囲む

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、footerが重なるという現象は起きませんでした。
つまり、問題が再現しません。

ご提示の部分に問題の原因はないかもしれません。
ご提示いただいていない部分に原因があるか、問題をうまく共有できていないように思います。問題を再現する手順について、もう少し詳しく説明してください。

[unikani129]

失礼いたしました、おっしゃる通りです。
コードを見直したところ、wrapperとfooterの間に要らない</div>タグが入っており、消したところ解決いたしました。
確認不足でお手を煩わせてしまい申し訳ございませんでした。

[Lhankor_Mhy]

ご解決されて何よりです。

お手数ですが、自己解決の処理をお願いします。

Answer 1

wrapperとfooterの間に入っていた不要な</div>タグの削除