Display Flex verursacht Text in anderen div angezeigt werden

Question

Ich stehe dieses Problem nur in mobilen Geräten. der Text in der rechten Teil des Code unten in der linken side.Please Check diese Geige auf das Bild erscheinen:

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

Okay, ich nur bekommen, was Sie wollen.

Sie definieren in Ihrer ersten Zeile eine Breite von 600px, also Ihre Box wird immer 600px Breite haben, auch auf Mobiltelefonen. Verwenden Sie stattdessen "max-width" und Sie sollten in Ordnung sein.

Und wenn Sie planen, mehr Dinge mit HTML/CSS zu tun, würde ich wirklich empfehlen, dass Sie sich etwas Zeit nehmen und in CSS-Selektoren/Klassen lesen und trennen Sie Ihre CSS und HTML dann!