CSS FlexBox：相同大小的元素 - Internet Explorer BUG答案

【问题标题】：CSS FlexBox: equally sized elements - Internet Explorer BUGCSS FlexBox：相同大小的元素 - Internet Explorer BUG
【发布时间】：2017-11-26 03:58:14
【问题描述】：

我正在使用 CSS FlexBox 来设计我的网站。（见下例）

在 FlexBox 中，“Flex:1”属性将确保容器中的所有项目都根据最宽的项目重新调整大小。

但是，在 Internet Explorer 10/11 中，除非您指定项目的宽度，否则这不起作用。（使用弹性基础）。问题是一旦你指定了一个 flex-basis 值，它就会变成静态的，不再根据内容收缩或增长。

在IE中是否有一些解决方案而不使宽度静态？

谢谢！

示例（IE - 错误，Chrome - 正确行为）： https://codepen.io/dsomekh/pen/BRoreL

<html>
<style>
.parent{

    display: flex;
    justify-content:center;
}
.table{
    display:flex;
    flex-direction:row;
}

.element{
    flex:1;
    border: 5px solid skyblue;
    display:flex;
}
</style>

<div class="parent">
    <div class="table">
        <div class="element">First element - small.</div>
        <div class="element">Second element - contains more text and first element will resize accordingly. How do we acheive this in IE?</div>
    </div>
</div>
</div>
</html>

【问题讨论】：

你总是可以使用百分比弹性基础。虽然这可能不是问题。 Flexbox 将使用容器元素的宽度来确定适当的测量值，类似地，如果它是 flex，父级的父级也需要它。因此，您可以简单地为您的表格类添加 100% 的宽度，它应该可以按预期工作。请注意，chrome 行为做了很多假设，因为您没有指定很多约束。 IE 也会做出假设，因此输出看起来会有所不同。
这并不能解决我的问题，因为表格类在整个页面上延伸，每个元素占 50%。这让我回到了同样的问题——宽度变成了静态的。
您能否详细说明您正在寻找的预期行为是什么？ flex 属性旨在根据您给它的设置拉伸元素以适应其父级。但是，您仍然需要为您的父级指定宽度约束，可以通过添加基于百分比的宽度或 flex 属性（如果适用），如 LGSon 所做的那样。

标签： html css flexbox

【解决方案1】：

更新

在这种情况下 IE 需要一个宽度集，结合flex: 1 1 0

.parent {
  display: flex;
  justify-content: center;
}

.table {
  display: flex;
  /* flex-direction: row;            row is default so this is not needed  */
}

.element {
  flex: 1 1 0;                          /*  changed  */
  width: 100%;                          /*  added  */
  border: 5px solid skyblue;
  display: flex;
}

<div class="parent">
  <div class="table">
    <div class="element">First element - small.</div>
    <div class="element">Second element - contains more text and first element will resize accordingly. How do we acheive this in IE?</div>
  </div>
</div>

【讨论】：

这并不能解决我的问题，因为表格类在整个页面上延伸，每个元素占 50%。这让我回到了同样的问题——宽度变成了静态的。
@DavidSomekh 我现在已经用跨浏览器工作的东西更新了我的答案。希望我现在可以让我的答案被赞成/接受:)
@DavidSomekh 我的回答没有价值，还是你还没看到？