Question

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

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

但是，在Internet Explorer 10/11中，除非指定项目的宽度，否则这不起作用。（使用flex-basis）。问题是，一旦指定了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>

Answer 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>

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

1 个答案: