IE 11 没有正确对齐 Flexbox

Question

以下内容适用于 Chrome 和 FF

<div style="display:flex; flex-direction:column;">
    <div style="flex:1">
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
    </div>
    <div>Bottom</div>
</div>

但是在 IE 11 中，底部 DIV 与顶部 DIV 重叠。有什么办法可以解决这个问题？

这里是 JS 小提琴：http://jsfiddle.net/fwfA6/

谢谢， 阿伦

Answer 1

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

这是flex-grow、flex-shrink 和flex-basis 组合的简写。第二个和第三个参数（flex-shrink 和flex-basis）是可选的。

默认为 0 1 自动。

所以将你的样式更改为（默认示例，你也可以检查其他值）

flex:0 1 auto

喜欢

<div style="display:flex; flex-direction:column; min-height:100%">
    <div style="flex:0 1 auto">
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
    </div>
    <div style="flex:0 1 auto">Bottom</div>
</div>

Demo

---

从我的问题Why is there a difference between css property flex: 0 1 1 and flex: 0px 1 1

我引用 Boltclock 的回答

flex 速记中唯一接受长度作为值的组件是 flex-basis。

在声明flex: 0px 1 1 中，您明确指定了一个长度值：0px。这将始终分配给flex-basis。该声明等价于：

flex-basis: 0px;
flex-grow: 1;
flex-shrink: 1;

另一方面，声明 flex: 0 1 1 是模棱两可的，因为 0 是 flex-grow 的可能值。前两个值可能会分配给flex-grow 和flex-shrink，如下所示：

flex-grow: 0;
flex-shrink: 1;

但是最后一个 1 值没有单位，这是无效的 CSS。

现在，您可能会问为什么解析器不能仅仅确定 0 是三个值中唯一可以解析为长度并相应地运行的值。这是因为规范声明（在该部分的最后）：

前面没有两个弹性因子的无单位零必须被解释为弹性因子。为避免误解或无效声明，作者必须指定一个零 组件和一个单元或在其前面加上两个 flex 因子。

这也更早地解决了歧义。

还阅读了下面的cmets问题，Boltclock向chromehttps://code.google.com/p/chromium/issues/detail?id=380984报告了一个错误