flexが表示され、他のdivにテキストが表示される

Question

この問題はモバイルデバイスでのみ発生しています。私はちょうどあなたが欲しいものだ

check this fiddle

<div id="main-class" style="border: 1px solid;width:600px;"> 
<div class='a_class'> 
<div id="wrapper-inner" style="display:flex;;overflow:hidden;"> 
<div style="padding:10px;"><img src="http://shop.wwe.com/on/demandware.static/-/Sites/default/dw29757933/images/slot/landing/superstar-landing/Superstar-Category_Superstar_562x408_theRock.png" 
style="width:80px;height:80px"></div> 
<div style="text-align: left;"> 
<span style="display:block;">Javascript is fun</span> 
<span style="">Programming language</span> 
<div class="space" style="height:5px"></div> 
<div style="font-size:12px;color:#90949c;">If this text is too large then this is casuing the whole section in the right side to be appear over the left image. this issue is occuring in mobile devices only. In desktop, its working f ine </div> 
</div> 

</div><!--wrapper-inner --> 
</div><!--a_class --> 
</div><!--main-class --> 

Answer 1

オーケー：以下のコードの右側部分のテキストは左このフィドルをチェックside.Pleaseに画像の上に表示されています。

最初の行に600pxの幅を定義すると、携帯電話でもボックスのサイズは常に600pxになります。代わりに "max-width"を使用してください。

もしあなたがhtml/cssでもっと多くのことをするつもりなら、あなたは時間をかけてcssセレクタ/クラスを読んで、あなたのcssとhtmlを分けてください。