css - iPad Air 和 iPhone 6+ 上的 flexbox 行 "width 0"

Question

我不明白为什么文字会覆盖我的图片...这样的效果只在 iPad 和 Iphone 翻滚屏幕上。

我的 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;}

还有我的 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>

我的错误结果:

seen

Answer 1

您需要为包含文本的 div 设置一个 flex 值。例如:

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

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