IE10 Flexbox P 元素不换行

Posted 2023-03-07

【中文标题】IE10 Flexbox P 元素不换行

【英文标题】：IE10 Flexbox P element non-wrapping

【发布时间】：2013-05-24 09:56:04

【问题描述】：

http://jsfiddle.net/pvJRK/2/

基本上在 IE10 中，当“方向”为一行时，文本比其父元素宽的 p 元素将溢出，随后将任何其他兄弟元素推出容器。换行在列模式下似乎可以正常工作（您可以在 Chrome 中查看相同的 jsfiddle 并查看其行为是否符合预期）。

<div id="flex-one">
    <p>Some extra long content (for the container) that correctly wraps!</p>
    <aside>Content</aside>
</div>

<div id="flex-two">
    <p>Some extra long content (for the container) that incorrectly wraps!</p>
    <aside>Content</aside>
</div>

div 
    width: 250px;
    padding: 1em;
    background: blue;
    display: -webkit-flex;
    display: -ms-flexbox;
    margin-bottom: 1em;


#flex-one 
    -webkit-flex-flow: column;
    -ms-flex-direction: column;


#flex-two 
    -webkit-flex-flow: row;
    -ms-flex-direction: row;


p 
    margin: 0;
    padding: 0;
    background: yellow;


aside 
    background: red;

关于如何纠正这种行为以使其不会溢出容器的任何想法？ （不提供固定的 with，因为这是在流体布局中使用的）。

【参考方案1】：

这对我来说没有任何意义，但在段落中添加-ms-flex: 0 1 auto 或-ms-flex: 1 1 auto 并在IE10 中更正它。默认情况下，元素应该在它们成为弹性项目时应用flex: 0 1 auto。

http://jsfiddle.net/pvJRK/3/

【讨论】：

感谢您发布此消息！我遇到了这个问题，但它与所有块级印刷元素 - 段落和标题有关。这让我发疯了！

我想指出这是因为 IE10 和 11 对弹性项目有不同的默认值。这只是因为IE没用。

如您所见here，IE10 的默认值为flex: 0 0 auto;。

另外，flex-shrink: 1 就足够了

'IE 10 使用不同的初始 flex-shrink 值'github.com/philipwalton/…

【参考方案2】：

对我来说，在它开始为我工作之前我需要这样做：

（为清楚起见使用类，为简洁起见不包括前缀）

html：

<a class="flex">
    <span class="flex-child">Text that isn't wrapping in IE10</span>
</a>

CSS：

.flex 
    display: flex;


.flex-child 
    display: block;
    max-width: 100%;
    flex-shrink: 1;

请注意，您需要将自然内联子元素设置为内联以外的其他内容（主要是 display:block 或 display:inline-block），以便修复工作。

感谢以前的答案让我大部分时间到达那里:)

更新：

如果将 flex-direction 设置为 column，上述技术将不起作用。

当 flex-direction 设置为 column 时，我的建议是使用最小宽度媒体查询在桌面上分配最大宽度。

.flex 
    display: flex;
    flex-direction: column;


//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) 
    .flex-child 
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
        flex-shrink: 1;
    

【讨论】：

这项技术对我有用。通过在子元素上设置display: block 和max-width: 100%，它可以阻止文本显示在单行中。感谢您发布 +1。

【参考方案3】：

接受的答案对我不起作用。

我的问题 (http://jsfiddle.net/Hoffmeyer/xmjs1rmq/) 已按照 flexbugs https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container 中的描述解决

设置

max-width: 100%

【参考方案4】：

将flex-shrink: 1 添加到需要包装的元素的父级已在 IE10 中为我解决了这个问题。

注意：flex: 1 1 auto（或-ms-flex）是以下的简写：

flex-grow: 1
flex-shrink: 1
flex-basis: auto

在这种情况下，特别是 flex-shrink 将解决此问题。这个属性默认应该是1，所以我认为这是弹性盒子的IE10实现的一个错误，通过显式设置它的值，它修复了这个错误。

【参考方案5】：

这张图是IE 10默认的flex mean，IE10默认的flex-shrink是0； 所以如果代码是：

.title 
   display: flex;
   justify-content: space-between;


<div class="title">
    <span class="title-name">some word word word</span>
    <label >some one checkbox</label>
</div>

但是跨度不会在IE10中换行，所以代码需要是这样的：

.title 
    display: flex;
    justify-content: space-between;

.title-name
    display: block;
    flex-shrink: 1;