Question

我的CSS中有以下代码：

@media screen and (max-width:600px) {
    ...
    .container {
        display: flex; 
        flex-flow: column;
        max-width: 100%;
    }

    .container p { 
        display: block;
        max-width: 100%;
    }
    ...
}

这在Chrome和Firefox中按预期呈现，但在IE中，文本无法换行，并且每个段落都呈现为单行（通常超出屏幕宽度）。那里有a variety of solutions which address this situation when 'flex-flow' is not set to 'column'。有没有办法解决自动换行问题，条件是＆＃39; flex-flow＆＃39;设置为＆＃39;列＆＃39;，并且没有为容器或子元素设置固定宽度？

更新

问题似乎与容器外部元素的宽度有关。 Here's a fiddle that illustrates what's going on

HTML：

<div class='wrapper'>

   <div class='container'>
     <p>
        Lorem ipsum...
     </p>
     <br>
     <p>
        Lorem ipsum dolor sit amet...
     </p>
   </div>
</div>

CSS：

.container {
  display: flex; 
  flex-flow: column;
}

.container p { 
  max-width: 100%;
}

.wrapper {
   clear: both;
   float: left;
   max-width: 1000px;
   margin-top: 20px;
}

在上面的示例中，文本将包含在Chrome和Firefox中，但不会包装在IE中。例如，如果＆＃39;显示＆＃39;的值更改为＆＃39; table＆＃39;，段落文本将按预期在所有浏览器中换行。

Answer 1

IE 10和11支持flexbox，但仍有很多相关的bugs。

在这种特殊情况下，IE无法识别public class Vlogger{ public static Class getInstance() { return StackWalker.getInstance(StackWalker.Option.RETAIN_CLASS_REFERENCE) .getCallerClass(); } }的固有宽度或display值。

这是一个修复：

.container

.wrapper {
  clear: both;
  float: left;
  max-width: 1000px;
  margin-top: 20px;
  display: flex;        /* NEW */
}

.container {
  display: flex;
  flex-flow: column;
  width: 100%;          /* NEW */
  border: 1px solid red;
}

.container p {
  max-width: 100%;
  border: 1px dashed black;
}

jsFiddle

Answer 2

IE需要设置width，而wrapper则需要设置。

Updated fiddle

.wrapper {
   clear: both;
   float: left;
   width: 100%;             /*  added  */
   max-width: 1000px;
   margin-top: 20px;
}

当容器具有flex-flow：column时，文本未包装在IE中

2 个答案:

jsFiddle