iPad Air和iPhone 6+上的flexbox行“宽度0”

Question

I can not understand why the text overrides my picture ... Such an effect only in the iPad and Iphone rollover screen.

My CSS:

.fl_item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

flex-direction: row;
-webkit-flex-direction: row;
-webkit-flex-flow: row nowrap;

width: 100%;
max-width: 1250px;

margin-left: auto;
margin-right: auto;}

And my HTML:

<div class="fl_item">
    <div>
        <img width="200" height="200" src="index_files/9d5bd242-fc64-11db-8b57-505054503030.jpg" border="0">
    </div>
    <div>овоатвыфа выаыфв аыфв а ыфва ыфв аыфва  ыв а выфа ы ва ыфва вфаывфаыфва выфа овоатвыфа выаыфв аыфв а ыфва ыфв аыфва  ыв а выфа ы ва ыфва ывфаывфаыфва выфаовоатвыфа выаыфв аыфв а ыфва ыфв аыфва  ыв а выфа ы ва ыфва ывфаывфаыфва выфа овоатвыфа выаыфв аыфв а ыфва ыфв аыфва  ыв а выфа ы ва ыфва ывфаывфаыфва выфаовоатвыфа выаыфв аыфв а ыфва ыфв аыфва  ыв а выфа ы ва ыфва ывфаывфаыфва выфа овоатвыфа выаыфв аыфв а ыфва ыфв аыфва  ыв а выфа ы ва ыфва ывфаывфаыфва выфа
    </div>
</div>

My wrong result:

seen

Answer 1

You need to set a flex value to the div that contains the text. For example:

.flexing {
     flex:1; 
     -webkit-box-flex:1; 
     -webkit-flex:1;
}

<div class="flexing">
     овоатвыфа выаыфв аыфв а ыфва ыфв аыфва
</div>