带有表和绝对定位的Flexbox在IE 10,11或Edge

Question

在Firefox和Chrome中，将元素定位到单元格的底部非常合适。

然而，在IE 10,11，Edge中，它似乎从单元格中的最后一段文本开始绝对位置。我的假设是它错误地计算了高度。

这个问题是否有解决方案或解决方法？

<div style="display: flex">
  <div style="flex:1">
  <table style="width:100%"><tr><td>1st line<br/>2nd line<br/>3rd line<br/>4th line<br/>5th line<br/>6th line</td>
    <td style="vertical-align:top; position: relative;">1st line<br/>2st line<div style="position:absolute; bottom: 0">position bottom</div></td></tr>  
    </table></div>
</div>

Answer 1

您应该考虑的第一件事是您正在使用的表元素与flexbox无关。它们不受flex属性的影响并保留standard CSS table properties。

创建弹性容器时（通过将display: flex或display: inline-flex应用于元素），子元素将成为弹性项目。灵活容器的后代超出子项不会成为弹性项目，因此不接受弹性属性。

在你的代码中，最外层的div是flex容器，使其子节点 - 嵌套的div - 一个flex项。此弹性项的任何后代都不与弹性相关。

另一个考虑因素是flexbox默认设置：创建Flex容器时，有几个默认规则生效。其中一条规则是align-items: stretch，它告诉弹性项目沿着横轴扩展容器的整个长度。

如果您将display: flex应用于表格行（tr），则会将表格单元格（td）转换为自动拉伸整个高度的弹性项目... 您的布局现在可以跨浏览器工作。

将此添加到您的代码中：

tr { display: flex; }

DEMO

IE10支持较旧版本的flexbox规范，并且需要供应商前缀。有关浏览器兼容性数据，请参阅我的答案：https://stackoverflow.com/a/35137869/3597276

Answer 2

解决方案是强制桌子和牢房的高度为100％。

然后修复了flexbox中IE中的相关问题

＆＃13;

＆＃13;

<div style="display: flex">
  <div style="flex:1">
  <table style="width:100%; height: 100%"><tr><td>1st line<br/>2nd line<br/>3rd line<br/>4th line<br/>5th line<br/>6th line</td>
    <td style="vertical-align:top; position: relative; height: 100%">1st line<br/>2st line<div style="position:absolute; bottom: 0">position bottom</div></td></tr>  
    </table></div>
</div>

＆＃13;

＆＃13;

＆＃13;